datastake-daf 0.6.149 → 0.6.151

package/dist/components/index.js

@@ -3065,7 +3065,7 @@ const config$3 = {
   Integration: config$4
 };
 
-const _excluded$q = ["width", "height", "size", "name", "fill"];
+const _excluded$r = ["width", "height", "size", "name", "fill"];
 const CustomIcon = _ref => {
   let {
       width = 14,
@@ -3074,7 +3074,7 @@ const CustomIcon = _ref => {
       name = "",
       fill = "none"
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   const conf = config$3[name];
   if (conf) {
     return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -9276,7 +9276,7 @@ createCommonjsModule(function (module, exports) {
 !function(e,n){module.exports=n();}(commonjsGlobal,(function(){return {name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var n=["th","st","nd","rd"],t=e%100;return "["+e+(n[(t-20)%10]||n[t]||n[0])+"]"}}}));
 });
 
-const _excluded$p = ["view", "module", "scope", "form", "meta"];
+const _excluded$q = ["view", "module", "scope", "form", "meta"];
 dayjs__default["default"].extend(customParseFormat);
 dayjs__default["default"].extend(utc);
 dayjs__default["default"].extend(utc);
@@ -9650,7 +9650,7 @@ const filterCreateData = data => {
       form,
       meta
     } = data,
-    rest = _objectWithoutProperties(data, _excluded$p);
+    rest = _objectWithoutProperties(data, _excluded$q);
   const _meta = isObjectEmpty(meta) ? undefined : meta;
   return _objectSpread2(_objectSpread2({}, rest), {}, {
     meta: _meta
@@ -10035,7 +10035,7 @@ SelectFilters.propTypes = {
   apiUrl: PropTypes__default["default"].string
 };
 
-const _excluded$o = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
+const _excluded$p = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
 function DAFTable(_ref) {
   let {
       columns = [],
@@ -10066,7 +10066,7 @@ function DAFTable(_ref) {
       app,
       doEmptyRows
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
@@ -10788,7 +10788,7 @@ Pagination.propTypes = {
   isMobile: PropTypes__default["default"].bool
 };
 
-const _excluded$n = ["size", "maxHeight", "dataSource", "columns", "pagination"];
+const _excluded$o = ["size", "maxHeight", "dataSource", "columns", "pagination"];
 function StickyTable(_ref) {
   let {
       size = null,
@@ -10797,7 +10797,7 @@ function StickyTable(_ref) {
       columns = {},
       pagination = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "daf-sticky-table",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11262,7 +11262,7 @@ const BTN_SIZE = {
   LG: 'large'
 };
 
-const _excluded$m = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
+const _excluded$n = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
 function DafButton(_ref) {
   let {
       content = '',
@@ -11276,7 +11276,7 @@ function DafButton(_ref) {
       style = {},
       className = ''
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$m);
+    restProps = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({
     icon: icon,
     type: type,
@@ -11510,12 +11510,12 @@ const Style$H = dt.div`
   }
 `;
 
-const _excluded$l = ["children"];
+const _excluded$m = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsxRuntime.jsx(Style$H, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11524,7 +11524,7 @@ const BorderedButton = _ref => {
   });
 };
 
-var _templateObject$b;
+var _templateObject$c;
 const variantConfig = {
   default: {
     className: "default-badge",
@@ -11642,7 +11642,7 @@ function Badge(_ref) {
     })
   });
 }
-const Style$G = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
+const Style$G = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
 Badge.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -11655,12 +11655,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$k = ["icon"];
+const _excluded$l = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -11982,7 +11982,7 @@ GoToSelect.propTypes = {
   t: PropTypes__default["default"].func
 };
 
-const _excluded$j = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
+const _excluded$k = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
   useToken: useToken$j
 } = antd.theme;
@@ -12075,7 +12075,7 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$j);
+    restProps = _objectWithoutProperties(_ref, _excluded$k);
   const {
     token
   } = useToken$j();
@@ -12742,7 +12742,7 @@ DAFHeader.propTypes = {
   downloadDisabled: PropTypes__default["default"].any
 };
 
-const _excluded$i = ["tabs", "onChange", "value", "className"];
+const _excluded$j = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -12750,7 +12750,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$i);
+    rest = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, _objectSpread2({
@@ -12847,14 +12847,16 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const useFooter = ({
-  leftContent,
-  centerContent,
-  rightContent,
-  actionButtons,
-  app,
-  isViewMode
-}) => {
+const _excluded$i = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
+const useFooter = _ref => {
+  let {
+    leftContent,
+    centerContent,
+    rightContent,
+    actionButtons,
+    app,
+    isViewMode
+  } = _ref;
   const renderFooterContent = React.useMemo(() => {
     const FooterContent = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "daf-footer-content",
@@ -12870,18 +12872,18 @@ const useFooter = ({
           className: "daf-footer-actions",
           children: actionButtons.map((button, index) => {
             const {
-              label,
-              onClick,
-              icon,
-              type = BTN_TYPES.PRIMARY,
-              tooltip,
-              disabled = false,
-              loading = false,
-              style = {},
-              className = "",
-              ...restProps
-            } = button;
-            return /*#__PURE__*/jsxRuntime.jsx(DafButton, {
+                label,
+                onClick,
+                icon,
+                type = BTN_TYPES.PRIMARY,
+                tooltip,
+                disabled = false,
+                loading = false,
+                style = {},
+                className = ""
+              } = button,
+              restProps = _objectWithoutProperties(button, _excluded$i);
+            return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
               content: label,
               type: type,
               size: BTN_SIZE.MD,
@@ -12893,9 +12895,8 @@ const useFooter = ({
               loading: loading,
               title: tooltip,
               style: style,
-              className: className,
-              ...restProps
-            }, index);
+              className: className
+            }, restProps), index);
           })
         })]
       })]
@@ -12908,180 +12909,8 @@ const useFooter = ({
   };
 };
 
-const FooterContainer = dt.div`
-	.daf-footer {
-		background: #ffffff;
-		border-top: 1px solid #e8e8e8;
-		border-left: none;
-		border-right: none;
-		border-bottom: none;
-		border-radius: 0;
-		padding: 24px;
-		margin: 0;
-		box-shadow: none;
-		z-index: 100;
-		position: relative;
-		min-height: 80px;
-
-		&.daf-footer-fixed {
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			z-index: 1000;
-		}
-
-		.daf-footer-content {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			width: 100%;
-			min-height: 32px;
-
-			.daf-footer-left {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: flex-start;
-			}
-
-			.daf-footer-center {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.daf-footer-right {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-				gap: 12px;
-
-				.daf-footer-actions {
-					.ant-btn {
-						height: 40px;
-						padding: 0 24px;
-						border-radius: 6px;
-						font-weight: 500;
-						font-size: 14px;
-						transition: all 0.3s ease;
-						border: 1px solid transparent;
-
-						&.ant-btn-primary {
-							background-color: var(--color-primary-70);
-							color: #ffffff;
-							border-color: var(--color-primary-70);
-
-							&:hover {
-								background-color: var(--color-primary-60);
-								border-color: var(--color-primary-60);
-							}
-
-							&:active {
-								background-color: var(--color-primary-80);
-								border-color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								background-color: #f5f5f5;
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-
-						&.ant-btn-default {
-							background: #ffffff;
-							color: #666666;
-							border-color: #d9d9d9;
-
-							&:hover {
-								border-color: var(--color-primary-70);
-								color: var(--color-primary-70);
-							}
-
-							&:active {
-								border-color: var(--color-primary-80);
-								color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								background-color: #f5f5f5;
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-
-						&.ant-btn-ghost {
-							background: transparent;
-							color: #666666;
-							border-color: #d9d9d9;
-
-							&:hover {
-								border-color: var(--color-primary-70);
-								color: var(--color-primary-70);
-								background: rgba(0, 0, 0, 0.02);
-							}
-
-							&:active {
-								border-color: var(--color-primary-80);
-								color: var(--color-primary-80);
-							}
-
-							&:disabled {
-								color: #bfbfbf;
-								border-color: #d9d9d9;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	/* Responsive design */
-	@media (max-width: 768px) {
-		.daf-footer {
-			margin: 0;
-			padding: 16px;
-
-			.daf-footer-content {
-				flex-direction: column;
-				gap: 16px;
-				align-items: stretch;
-
-				.daf-footer-left,
-				.daf-footer-center,
-				.daf-footer-right {
-					flex: none;
-					justify-content: center;
-				}
-
-				.daf-footer-right {
-					.daf-footer-actions {
-						justify-content: center;
-					}
-				}
-			}
-		}
-	}
-
-	/* App-specific styling */
-	&.sbg-app {
-		.daf-footer {
-			background: #f8f9fa;
-			border-color: #e9ecef;
-		}
-	}
-
-	&.nashiriki-app {
-		.daf-footer {
-			background: #fff;
-			border-color: #d9d9d9;
-		}
-	}
-`;
+var _templateObject$b;
+const FooterContainer = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\t.daf-footer {\n\t\tbackground: #ffffff;\n\t\tborder-top: 1px solid #e8e8e8;\n\t\tborder-left: none;\n\t\tborder-right: none;\n\t\tborder-bottom: none;\n\t\tborder-radius: 0;\n\t\tpadding: 24px;\n\t\tmargin: 0;\n\t\tbox-shadow: none;\n\t\tz-index: 100;\n\t\tposition: relative;\n\t\tmin-height: 80px;\n\n\t\t&.daf-footer-fixed {\n\t\t\tposition: fixed;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tz-index: 1000;\n\t\t}\n\n\t\t.daf-footer-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\twidth: 100%;\n\t\t\tmin-height: 32px;\n\n\t\t\t.daf-footer-left {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-start;\n\t\t\t}\n\n\t\t\t.daf-footer-center {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\n\t\t\t.daf-footer-right {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\tgap: 12px;\n\n\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t.ant-btn {\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\tpadding: 0 24px;\n\t\t\t\t\t\tborder-radius: 6px;\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\t\tborder: 1px solid transparent;\n\n\t\t\t\t\t\t&.ant-btn-primary {\n\t\t\t\t\t\t\tbackground-color: var(--color-primary-70);\n\t\t\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-60);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-60);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-default {\n\t\t\t\t\t\t\tbackground: #ffffff;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-ghost {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t\tbackground: rgba(0, 0, 0, 0.02);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Responsive design */\n\t@media (max-width: 768px) {\n\t\t.daf-footer {\n\t\t\tmargin: 0;\n\t\t\tpadding: 16px;\n\n\t\t\t.daf-footer-content {\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 16px;\n\t\t\t\talign-items: stretch;\n\n\t\t\t\t.daf-footer-left,\n\t\t\t\t.daf-footer-center,\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\tflex: none;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* App-specific styling */\n\t&.sbg-app {\n\t\t.daf-footer {\n\t\t\tbackground: #f8f9fa;\n\t\t\tborder-color: #e9ecef;\n\t\t}\n\t}\n\n\t&.nashiriki-app {\n\t\t.daf-footer {\n\t\t\tbackground: #fff;\n\t\t\tborder-color: #d9d9d9;\n\t\t}\n\t}\n"])));
 
 function DAFFooter(_ref) {
   let {
@@ -13126,10 +12955,15 @@ DAFFooter.propTypes = {
   isViewMode: PropTypes__default["default"].bool
 };
 
-const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
+const PAGE_HEIGHT = 1587; // Total height of a virtual PDF page
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const ROW_SPACING = 24; // Spacing between content rows
+const CONTENT_BOTTOM_PADDING = 30; // Extra padding at the very bottom of the last section of the document
+
+// This is the actual height available for the *flowing content* after Puppeteer
+// applies its margins for the header and footer.
+const USABLE_FLOW_HEIGHT_PER_PAGE = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 const Row = _ref => {
   let {
     widgets,
@@ -13144,8 +12978,14 @@ const Row = _ref => {
         setHeight(entry.contentRect.height);
       }
     });
-    observer.observe(ref.current);
-    return () => observer.disconnect();
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref.current) {
+        observer.disconnect();
+      }
+    };
   }, []);
   React.useEffect(() => {
     if (height) {
@@ -13154,7 +12994,7 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height]);
+  }, [height, i, onChangeHeight]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
@@ -13165,6 +13005,8 @@ function PdfView(_ref2) {
   let {
     config = [],
     customClassName,
+    // No longer needed to directly render title/imgSrc/etc within PdfView as Puppeteer handles it
+    // but kept in props for completeness if other parts of the app use them.
     title = 'Title',
     imgSrc = '',
     userId = 'IDD-0000000',
@@ -13173,54 +13015,57 @@ function PdfView(_ref2) {
     downloadId = 'DWL-00000123'
   } = _ref2;
   const [sectionsConfig, setSectionsConfig] = React.useState({});
-  const [pages, setPages] = React.useState([1]);
+  const [pagesCount, setPagesCount] = React.useState(1); // Track total pages for Puppeteer footer
+
   const doSizing = React.useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
+    // Ensure keys are processed in order
+    const keys = Object.keys(sectionsConfig).sort((a, b) => parseInt(a) - parseInt(b));
     if (keys.length === config.length) {
-      let incrHeight = 0;
+      let currentPageContentHeight = 0;
+      let currentPage = 1;
+
+      // Reset all page-break styles before recalculating
       keys.forEach(k => {
         const {
           ref
         } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
+        if (ref.current) {
+          ref.current.style.pageBreakBefore = 'auto'; // Reset to default
+          ref.current.style.marginTop = '0px'; // Clear any previous dynamic margins
+          ref.current.style.paddingBottom = '0px'; // Clear any previous dynamic paddings
+        }
       });
       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 (!ref.current) return;
+        let spaceNeededForThisSection = height;
+
+        // Add ROW_SPACING *after* each section, except the very last one.
+        if (i < keys.length - 1) {
+          spaceNeededForThisSection += ROW_SPACING;
         } else {
-          incrHeight = newHeight + 24;
+          // Add CONTENT_BOTTOM_PADDING after the very last section of the document.
+          spaceNeededForThisSection += CONTENT_BOTTOM_PADDING;
+        }
+
+        // If placing this section on the current page would exceed the usable content area,
+        // mark it to start on a new page.
+        if (currentPageContentHeight + spaceNeededForThisSection > USABLE_FLOW_HEIGHT_PER_PAGE) {
+          ref.current.style.pageBreakBefore = 'always';
+          currentPage++;
+          // Reset current page content height to just what this new section takes.
+          currentPageContentHeight = spaceNeededForThisSection;
+        } else {
+          // This section fits on the current page.
+          currentPageContentHeight += spaceNeededForThisSection;
         }
-        // console.groupEnd();
       });
-      setPages(_pages);
+      setPagesCount(currentPage);
     }
-  }, [sectionsConfig]);
+  }, [sectionsConfig, config.length]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13246,89 +13091,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", {
+  return /*#__PURE__*/jsxRuntime.jsx("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,
-          width: '100%',
-          height: HEADER_HEIGHT - 24,
-          position: 'absolute',
-          left: 0,
-          zIndex: 1000000
-        },
-        className: "flex-row dashboard-header",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center flex-1",
-          children: /*#__PURE__*/jsxRuntime.jsx("h2", {
-            children: title
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsx("img", {
-            src: imgSrc,
-            alt: "logo"
-          })
-        })]
-      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          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')
-          })
-        }), /*#__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: userId
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Account ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
-                children: accountId
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Document ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
-                children: documentId
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Download ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
-                children: downloadId
-              })]
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: page
-          })
-        })]
-      }, "footers-".concat(page))]
-    }))]
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      id: "pdf-content-root",
+      "data-page-count": pagesCount,
+      children: renderDashboard()
+    })
   });
 }
 PdfView.propTypes = {
@@ -13338,7 +13110,8 @@ PdfView.propTypes = {
   imgSrc: PropTypes__default["default"].string,
   userId: PropTypes__default["default"].string,
   accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string
+  documentId: PropTypes__default["default"].string,
+  downloadId: PropTypes__default["default"].string
 };
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {
@@ -15440,7 +15213,11 @@ function Widget(_ref) {
           className: "flex justify-content-end",
           children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
             size: "small",
-            className: "flex-1 no-min-width",
+            className: "squareIconButton no-min-width",
+            style: {
+              height: '25px',
+              width: '25px'
+            },
             onClick: handleCollapseToggle,
             icon: isCollapsed ? /*#__PURE__*/jsxRuntime.jsx(Icons.RightOutlined, {
               style: {