datastake-daf 0.6.251 → 0.6.252

package/dist/components/index.js

@@ -15422,226 +15422,6 @@ const PdfForm = _ref3 => {
     return organizedSections;
   };
   const organizedForm = React.useMemo(() => organizeFormByHeaders(form), [form]);
-
-  // Constants for height calculations (same as PdfView)
-  const PAGE_HEIGHT = 1587;
-  const FOOTER_HEIGHT = 70;
-  const HEADER_HEIGHT = 100;
-
-  // Helper function to estimate tree node height based on content and type
-  const estimateTreeNodeHeight = function (key, config, value) {
-    let level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-    const baseHeight = 28; // Base height per tree node
-    const indentHeight = level * 2; // Additional height per level
-    let totalHeight = baseHeight + indentHeight;
-
-    // Adjust height based on node type
-    if ((config === null || config === void 0 ? void 0 : config.type) === 'header') {
-      totalHeight += 15; // Headers need more space
-    } else if ((config === null || config === void 0 ? void 0 : config.type) === 'textarea') {
-      totalHeight += 40; // Textareas are taller
-    } else if ((config === null || config === void 0 ? void 0 : config.type) === 'dataLink' || (config === null || config === void 0 ? void 0 : config.type) === 'dataLinkGroup') {
-      totalHeight += 20; // Data links often have more content
-    }
-
-    // Add height for value content if it exists
-    if (value && typeof value === 'string' && value.length > 50) {
-      totalHeight += Math.ceil(value.length / 50) * 15; // Multi-line content
-    }
-
-    // Add height for children recursively
-    if (config !== null && config !== void 0 && config.inputs) {
-      const childKeys = Object.keys(config.inputs).filter(childKey => {
-        const childConfig = config.inputs[childKey];
-        // Check showIf condition
-        if (childConfig !== null && childConfig !== void 0 && childConfig.showIf && !evaluateShowIfCondition(childConfig.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;
-      });
-      childKeys.forEach(childKey => {
-        const childConfig = config.inputs[childKey];
-        const childValue = (value === null || value === void 0 ? void 0 : value[childKey]) || (data === null || data === void 0 ? void 0 : data[childKey]);
-        totalHeight += estimateTreeNodeHeight(childKey, childConfig, childValue, level + 1);
-      });
-    }
-
-    // Handle array/repeated content
-    if (Array.isArray(value)) {
-      value.forEach(itemValue => {
-        totalHeight += estimateTreeNodeHeight(key, config, itemValue, level);
-      });
-    }
-    return totalHeight;
-  };
-
-  // Helper function to split section based on height constraints (goes deep if needed)
-  const createHeightConstrainedSections = (sectionKey, section) => {
-    const MAX_SECTION_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - 150; // Conservative buffer
-    const subSections = [];
-
-    // Get all top-level items in the section with detailed analysis
-    const topLevelItems = Object.keys(section).filter(key => !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')).map(key => {
-      var _section$key;
-      return {
-        key,
-        config: section[key],
-        estimatedHeight: estimateTreeNodeHeight(key, section[key], data === null || data === void 0 ? void 0 : data[key]),
-        canSplit: ((_section$key = section[key]) === null || _section$key === void 0 ? void 0 : _section$key.inputs) && Object.keys(section[key].inputs).length > 1 // Can this item be further split?
-      };
-    }).sort((a, b) => {
-      var _a$config, _b$config;
-      return (((_a$config = a.config) === null || _a$config === void 0 ? void 0 : _a$config.position) || 0) - (((_b$config = b.config) === null || _b$config === void 0 ? void 0 : _b$config.position) || 0);
-    });
-    let currentSubSection = _objectSpread2({}, section);
-
-    // Remove all items from the base section structure
-    Object.keys(section).forEach(key => {
-      if (!(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')) {
-        delete currentSubSection[key];
-      }
-    });
-    let currentHeight = 80; // Base height for section header
-    let subSectionIndex = 0;
-    topLevelItems.forEach((item, index) => {
-      const {
-        key,
-        config,
-        estimatedHeight,
-        canSplit
-      } = item;
-
-      // If a single item is too large and can be split, split it at the child level
-      if (estimatedHeight > MAX_SECTION_HEIGHT * 0.8 && canSplit) {
-        // Split this large item into smaller parts
-        const childSplits = splitLargeItem(key, config, data === null || data === void 0 ? void 0 : data[key], MAX_SECTION_HEIGHT * 0.6);
-        childSplits.forEach((splitItem, splitIndex) => {
-          // Check if current subsection has room
-          if (currentHeight + splitItem.estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
-            // Save current sub-section
-            subSections.push({
-              key: "".concat(sectionKey, "_part_").concat(subSectionIndex),
-              section: _objectSpread2({}, currentSubSection),
-              title: section.label
-            });
-
-            // Start new sub-section
-            currentSubSection = {
-              id: section.id,
-              label: section.label,
-              position: section.position + subSectionIndex + 1,
-              subTitle: section.subTitle
-            };
-            currentHeight = 80;
-            subSectionIndex++;
-          }
-
-          // Add split item to current sub-section
-          currentSubSection[splitItem.key] = splitItem.config;
-          currentHeight += splitItem.estimatedHeight;
-        });
-      } else {
-        // Regular processing for items that fit or can't be split
-        // Check if adding this item would exceed height limit
-        if (currentHeight + estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
-          // Save current sub-section
-          subSections.push({
-            key: "".concat(sectionKey, "_part_").concat(subSectionIndex),
-            section: _objectSpread2({}, currentSubSection),
-            title: section.label
-          });
-
-          // Start new sub-section
-          currentSubSection = {
-            id: section.id,
-            label: section.label,
-            position: section.position + subSectionIndex + 1,
-            subTitle: section.subTitle
-          };
-          currentHeight = 80;
-          subSectionIndex++;
-        }
-
-        // Add item to current sub-section
-        currentSubSection[key] = config;
-        currentHeight += estimatedHeight;
-      }
-    });
-
-    // Add the final sub-section if it has content
-    if (Object.keys(currentSubSection).length > 4) {
-      subSections.push({
-        key: subSectionIndex === 0 ? sectionKey : "".concat(sectionKey, "_part_").concat(subSectionIndex),
-        section: currentSubSection,
-        title: section.label
-      });
-    }
-    return subSections.length > 0 ? subSections : [{
-      key: sectionKey,
-      section: section,
-      title: section.label
-    }];
-  };
-
-  // Helper function to split large items at the child level
-  const splitLargeItem = (parentKey, parentConfig, parentValue, maxHeight) => {
-    if (!(parentConfig !== null && parentConfig !== void 0 && parentConfig.inputs)) {
-      return [{
-        key: parentKey,
-        config: parentConfig,
-        estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue)
-      }];
-    }
-    const childItems = Object.keys(parentConfig.inputs).filter(childKey => {
-      const childConfig = parentConfig.inputs[childKey];
-      return !(childConfig !== null && childConfig !== void 0 && childConfig.showIf) || evaluateShowIfCondition(childConfig.showIf, data);
-    }).map(childKey => ({
-      key: childKey,
-      config: parentConfig.inputs[childKey],
-      estimatedHeight: estimateTreeNodeHeight(childKey, parentConfig.inputs[childKey], parentValue === null || parentValue === void 0 ? void 0 : parentValue[childKey])
-    })).sort((a, b) => {
-      var _a$config2, _b$config2;
-      return (((_a$config2 = a.config) === null || _a$config2 === void 0 ? void 0 : _a$config2.position) || 0) - (((_b$config2 = b.config) === null || _b$config2 === void 0 ? void 0 : _b$config2.position) || 0);
-    });
-    const splits = [];
-    let currentSplit = {
-      key: "".concat(parentKey, "_part_0"),
-      config: _objectSpread2(_objectSpread2({}, parentConfig), {}, {
-        inputs: {}
-      }),
-      estimatedHeight: 40 // Base height for parent structure
-    };
-    let splitIndex = 0;
-    childItems.forEach(child => {
-      if (currentSplit.estimatedHeight + child.estimatedHeight > maxHeight && Object.keys(currentSplit.config.inputs).length > 0) {
-        splits.push(currentSplit);
-        splitIndex++;
-        currentSplit = {
-          key: "".concat(parentKey, "_part_").concat(splitIndex),
-          config: _objectSpread2(_objectSpread2({}, parentConfig), {}, {
-            label: parentConfig.label,
-            inputs: {}
-          }),
-          estimatedHeight: 40
-        };
-      }
-      currentSplit.config.inputs[child.key] = child.config;
-      currentSplit.estimatedHeight += child.estimatedHeight;
-    });
-    if (Object.keys(currentSplit.config.inputs).length > 0) {
-      splits.push(currentSplit);
-    }
-    return splits.length > 0 ? splits : [{
-      key: parentKey,
-      config: parentConfig,
-      estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue)
-    }];
-  };
   const pdfConfig = React.useMemo(() => {
     const sections = [];
     Object.keys(organizedForm).forEach(sectionKey => {
@@ -15649,40 +15429,28 @@ const PdfForm = _ref3 => {
       if (typeof section !== 'object' || !section.label) {
         return;
       }
-
-      // Create height-constrained sub-sections
-      const subSections = createHeightConstrainedSections(sectionKey, section);
-      subSections.forEach(_ref4 => {
-        let {
-          key,
-          section: subSection,
-          title
-        } = _ref4;
-        sections.push({
-          render: () => /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "pdf-form-section",
-            children: /*#__PURE__*/jsxRuntime.jsx(PdfFormContent, {
-              form: {
-                [key]: _objectSpread2(_objectSpread2({}, subSection), {}, {
-                  label: title
-                })
-              },
-              data: data,
-              t: t,
-              user: user,
-              title: formName,
-              source: source,
-              version: version,
-              getApiBaseUrl: getApiBaseUrl,
-              getAppHeader: getAppHeader,
-              app: app
-            })
-          }, key),
-          style: {
-            marginBottom: '20px',
-            padding: '0 20px'
-          }
-        });
+      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;
@@ -18640,7 +18408,7 @@ const useMap$1 = ({
         const pos = allData.map(m => Array.isArray(m.area) ? m.area : [Number(m.marker?.lat ?? 0), Number(m.marker?.lng ?? 0)]);
         const bounds = new L__namespace.LatLngBounds(pos);
         mapRef.fitBounds(bounds, {
-          padding: [20, 20]
+          padding: [10, 10]
         });
       }
     }
@@ -19931,6 +19699,39 @@ const useGlobe = ({
               }));
               roots.current.push(root);
             }
+          } else if (type === "project") {
+            // Handle project markers
+            const el = document.createElement('div');
+            el.className = 'mapboxgl-marker project-marker';
+            el.style.width = '30px';
+            el.style.height = '30px';
+            el.style.backgroundColor = '#52c41a'; // Green color for projects
+            el.style.borderRadius = '50%';
+            el.style.border = '3px solid white';
+            el.style.cursor = 'pointer';
+            el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
+            el.style.display = 'flex';
+            el.style.alignItems = 'center';
+            el.style.justifyContent = 'center';
+            el.style.color = 'white';
+            el.style.fontWeight = 'bold';
+            el.style.fontSize = '12px';
+
+            // Add project icon (you can customize this)
+            el.innerHTML = '📋';
+            const div = document.createElement("div");
+            const root = client.createRoot(div);
+            root.render( /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: renderTooltipJsx({
+                title: d.name,
+                items: renderTooltip(d),
+                link,
+                total: d.sources,
+                onClickLink: () => onClickLink(d)
+              })
+            }));
+            roots.current.push(root);
+            marker = new mapboxgl.Marker(el).setLngLat([d.marker.lng, d.marker.lat]).setPopup(new mapboxgl.Popup().setDOMContent(div)).addTo(mapRef);
           } else {
             // Default marker for other types
             const el = document.createElement('div');
@@ -20737,29 +20538,12 @@ const DAFSteps = _ref => {
   let {
     direction = "vertical",
     current = 0,
-    items = [],
-    scrollThreshold = 4
+    items = []
   } = _ref;
-  const shouldScroll = items.length > scrollThreshold;
-  const scrollableStyles = shouldScroll ? _objectSpread2(_objectSpread2({}, direction === "vertical" ? {
-    maxHeight: "300px",
-    overflowY: "auto",
-    overflowX: "hidden"
-  } : {
-    maxWidth: "100%",
-    overflowX: "auto",
-    overflowY: "hidden",
-    whiteSpace: "nowrap"
-  }), {}, {
-    padding: "8px",
-    marginRight: direction === "vertical" ? "-8px" : "0",
-    paddingRight: direction === "vertical" ? "16px" : "8px"
-  }) : {};
-  return /*#__PURE__*/jsxRuntime.jsx(Widget, {
-    title: "Life Cycle",
-    className: "with-border-header",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: scrollableStyles,
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Widget, {
+      title: "Life Cycle",
+      className: "with-border-header",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.Steps, {
         direction: direction,
         current: current,
@@ -20774,14 +20558,12 @@ DAFSteps.propTypes = {
   items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
     title: PropTypes__default["default"].string.isRequired,
     description: PropTypes__default["default"].string
-  })),
-  scrollThreshold: PropTypes__default["default"].number
+  }))
 };
 DAFSteps.defaultProps = {
   direction: "vertical",
   current: 0,
-  items: [],
-  scrollThreshold: 4
+  items: []
 };
 
 /**

package/dist/utils/index.js

@@ -3835,7 +3835,7 @@ function showHideForm(form, formsValue) {
 
 /* eslint-disable no-constant-condition */
 const getNkey = namespace => {
-  if (['location', 'scl', 'village', 'event', 'incidents', 'corrective-actions', 'testimonials', 'initiatives', 'victims', 'pictures', 'documents', 'lir', 'sp', 'im', 'sci', 'bpe', 'gm'].includes(namespace)) {
+  if (['location', 'scl', 'village', 'event', 'incidents', 'corrective-actions', 'testimonials', 'initiatives', 'victims', 'pictures', 'documents', 'lir', 'sp', 'im', 'sci', 'bpe', 'gm', 'project-readiness'].includes(namespace)) {
     return 'scoping';
   }
   return namespace;

package/package.json

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

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

@@ -64,3 +64,11 @@ export const LocationGlobe = {
 		type: "location",
 	},
 };
+
+export const ProjectGlobe = {
+	name: "Project Globe",
+	args: {
+		...configs.ProjectConfig,
+		type: "project",
+	},
+};

package/src/@daf/core/components/Dashboard/Globe/hook.js

@@ -264,6 +264,48 @@ export const useGlobe = ({
 
               roots.current.push(root);
             }
+          } else if (type === "project") {
+            // Handle project markers
+            const el = document.createElement('div');
+            el.className = 'mapboxgl-marker project-marker';
+            el.style.width = '30px';
+            el.style.height = '30px';
+            el.style.backgroundColor = '#52c41a'; // Green color for projects
+            el.style.borderRadius = '50%';
+            el.style.border = '3px solid white';
+            el.style.cursor = 'pointer';
+            el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
+            el.style.display = 'flex';
+            el.style.alignItems = 'center';
+            el.style.justifyContent = 'center';
+            el.style.color = 'white';
+            el.style.fontWeight = 'bold';
+            el.style.fontSize = '12px';
+            
+            // Add project icon (you can customize this)
+            el.innerHTML = '📋';
+
+            const div = document.createElement("div");
+            const root = createRoot(div);
+
+            root.render(
+              <>
+                {renderTooltipJsx({
+                  title: d.name,
+                  items: renderTooltip(d),
+                  link,
+                  total: d.sources,
+                  onClickLink: () => onClickLink(d),
+                })}
+              </>,
+            );
+
+            roots.current.push(root);
+
+            marker = new mapboxgl.Marker(el)
+              .setLngLat([d.marker.lng, d.marker.lat])
+              .setPopup(new mapboxgl.Popup().setDOMContent(div))
+              .addTo(mapRef);
           } else {
             // Default marker for other types
             const el = document.createElement('div');

package/src/@daf/core/components/Dashboard/Map/hook.js

@@ -306,7 +306,7 @@ export const useMap = ({
 						: [Number(m.marker?.lat ?? 0), Number(m.marker?.lng ?? 0)],
 				);
 				const bounds = new L.LatLngBounds(pos);
-				mapRef.fitBounds(bounds, { padding: [20, 20] });
+				mapRef.fitBounds(bounds, { padding: [10, 10] });
 			}
 		}
 	}, [allData, mapRef]);

package/src/@daf/core/components/Dashboard/Map/storyConfig.js

@@ -3,5 +3,6 @@ import { storyConfig as DefaultMapConfig } from "./storyConfig2.js";
 import { storyConfig as TerritoryMapConfig } from "./storyConfig3.js";
 import { storyConfig as StakeholderMapConfig } from "./storyConfig4.js";
 import { storyConfig as ChainMapConfig } from "./storyConfig5.js";
+import { storyConfig as ProjectConfig } from "./storyConfig6.js";
 
-export { DefaultMapConfig, TerritoryMapConfig, StakeholderMapConfig, EventConfig, ChainMapConfig };
+export { DefaultMapConfig, TerritoryMapConfig, StakeholderMapConfig, EventConfig, ChainMapConfig, ProjectConfig };

package/src/@daf/core/components/Dashboard/Map/storyConfig6.js

@@ -0,0 +1,366 @@
+import { findCoordinatesByCountry } from "../Globe/globeHelpers";
+
+// Transform project data to match Globe component expectations
+const transformProjectsToGlobeData = (projects) => {
+  return projects.map(project => {
+    // Get coordinates from country code
+    const coordinates = findCoordinatesByCountry(project.country);
+    
+    return {
+      ...project,
+      marker: {
+        lat: coordinates[0],
+        lng: coordinates[1]
+      },
+      name: project.name || project.title,
+      description: project.projectDescription || "No description available",
+      total: 1, // Each project is a single marker
+      sources: 1,
+      type: "project",
+      // Add project-specific data for tooltip
+      projectData: {
+        datastakeId: project.datastakeId,
+        sectoralScope: project.sectoralScope,
+        percentageCompletion: project.percentageCompletion,
+        country: project.country,
+        author: project.author?.name,
+        createdAt: project.createdAt,
+        mainImage: project.mainImage?.[0]?.url
+      }
+    };
+  });
+};
+
+// Sample project data from the user
+const sampleProjects = [
+  {
+    "_id": "687a4d9a4cfa60f30db94c52",
+    "createdAt": "2025-07-18T00:00:00.000Z",
+    "updatedAt": "2025-07-18T00:00:00.000Z",
+    "form": "straatosProject",
+    "id": "3129457d-b787-4955-ba25-04d67fecfaaa",
+    "name": "ABC Mangrove Senegal",
+    "country": "SN",
+    "datastakeId": "PRJ-00000000103",
+    "title": "ABC Mangrove Senegal",
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 11.76470588235294,
+    "projectDescription": "ABC Mangrove Senegal is an environmental and community-focused initiative dedicated to the restoration, preservation, and sustainable management of mangrove ecosystems in Senegal.",
+    "mainImage": [
+      {
+        "url": "https://cdn.straatos.io/dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09601/auth-bg_cropped-1754901830065.png",
+        "path": "dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09601/auth-bg_cropped-1754901830065.png",
+        "name": "auth-bg_cropped-1754901830065.png",
+        "size": 1693409,
+        "type": "image/png"
+      }
+    ],
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "687a57e24cfa60f30db954ca",
+    "createdAt": "2025-07-18T00:00:00.000Z",
+    "updatedAt": "2025-07-18T00:00:00.000Z",
+    "form": "project",
+    "id": "10e09c02-1986-4eb5-9069-355bffdfb93d",
+    "name": "Testing",
+    "country": "SN",
+    "datastakeId": "PRJ-00000000104",
+    "title": "Testing",
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 28.57142857142857,
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "687e619d4cfa60f30db967ea",
+    "createdAt": "2025-07-21T15:49:49.431Z",
+    "updatedAt": "2025-07-21T15:49:49.431Z",
+    "form": "straatosProject",
+    "id": "51440c46-2d42-452d-8ea1-614002589d4c",
+    "name": "Pietra's Project",
+    "country": "BR",
+    "datastakeId": "PRJ-00000000105",
+    "title": "Pietra's Project",
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "6883918729bcd5751e8dd579",
+    "createdAt": "2025-07-25T14:15:35.305Z",
+    "updatedAt": "2025-07-25T14:15:35.305Z",
+    "form": "straatosProject",
+    "id": "275acff8-c478-40a5-a23d-94968dca01d1",
+    "name": "efwefwe",
+    "country": "AX",
+    "datastakeId": "PRJ-00000000106",
+    "title": "efwefwe",
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 100,
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "6883b50e29bcd5751e8dda3e",
+    "createdAt": "2025-07-25T00:00:00.000Z",
+    "updatedAt": "2025-07-25T00:00:00.000Z",
+    "form": "project",
+    "id": "3bac13f1-4ebc-4428-9230-af1dc6ab1ab9",
+    "name": "Geri Test",
+    "country": "AS",
+    "datastakeId": "PRJ-00000000107",
+    "title": "Geri Test",
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 33.33333333333333,
+    "projectDescription": "ABC Mangrove Senegal is an environmental and community-focused initiative dedicated to the restoration, preservation, and sustainable management of mangrove ecosystems in Senegal.",
+    "mainImage": [
+      {
+        "url": "https://cdn.straatos.io/dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09600/screenshot-from-2024-11-11-09-29-22-1758200879648.png",
+        "path": "dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09600/screenshot-from-2024-11-11-09-29-22-1758200879648.png",
+        "name": "screenshot-from-2024-11-11-09-29-22-1758200879648.png",
+        "size": 414991,
+        "type": "image/png"
+      }
+    ],
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "688c66c62fb165d7a389fbf7",
+    "createdAt": "2025-08-01T07:03:34.501Z",
+    "updatedAt": "2025-08-01T07:03:34.501Z",
+    "form": "straatosProject",
+    "id": "39fd860e-412c-456f-9b70-a67d4dc82433",
+    "name": "test 777",
+    "country": "AL",
+    "datastakeId": "PRJ-00000000109",
+    "title": "test 777",
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "68927b8d3c4650496ed9003f",
+    "createdAt": "2025-08-05T00:00:00.000Z",
+    "updatedAt": "2025-08-05T00:00:00.000Z",
+    "form": "straatosProject",
+    "id": "468204d2-28d6-4097-a362-ad12d642bf4f",
+    "name": "Current",
+    "country": "AL",
+    "datastakeId": "PRJ-00000000111",
+    "title": "Current",
+    "mainImage": [
+      {
+        "url": "https://cdn.straatos.io/dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09600/screenshot-from-2024-11-28-12-41-52-1754465225229.png",
+        "path": "dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09600/screenshot-from-2024-11-28-12-41-52-1754465225229.png",
+        "name": "screenshot-from-2024-11-28-12-41-52-1754465225229.png",
+        "size": 92090,
+        "type": "image/png"
+      }
+    ],
+    "sectoralScope": "energy",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 17.647058823529413,
+    "projectDescription": "testing testing testing",
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "68985abea7d389ab99d611e4",
+    "createdAt": "2025-08-10T00:00:00.000Z",
+    "updatedAt": "2025-08-10T00:00:00.000Z",
+    "form": "project",
+    "id": "c949c1a4-f83d-45fa-820f-0ee56bc023ba",
+    "name": "project 1",
+    "country": "AL",
+    "datastakeId": "PRJ-00000000112",
+    "title": "project 1",
+    "mainImage": [
+      {
+        "url": "https://cdn.straatos.io/dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09601/abcmangrove_allcot-10-1756470770827.jpg",
+        "path": "dev/company-df5378ae-704a-4a46-93b2-336cc5341456/user-e8d71443-339f-4b45-bbf5-22f0e5f09601/abcmangrove_allcot-10-1756470770827.jpg",
+        "name": "abcmangrove_allcot-10-1756470770827.jpg",
+        "size": 146120,
+        "type": "image/jpeg"
+      }
+    ],
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 25,
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "68c3e1817ce6a6d7d8c16250",
+    "createdAt": "2025-09-12T00:00:00.000Z",
+    "updatedAt": "2025-09-12T00:00:00.000Z",
+    "form": "project",
+    "id": "b7a6ce62-dda3-4ffd-8f5a-e9721e15fe9f",
+    "name": "test fran",
+    "country": "CL",
+    "datastakeId": "PRJ-00000000113",
+    "title": "test fran",
+    "sectoralScope": "agricultureForestryAndOtherLandUse",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 25,
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  },
+  {
+    "_id": "68cab88001892530c66c3079",
+    "createdAt": "2025-09-17T13:32:48.646Z",
+    "updatedAt": "2025-09-17T13:32:48.646Z",
+    "form": "project",
+    "id": "a64070b0-74bc-4694-8e29-8006f9de70f7",
+    "name": "Pietra's Project",
+    "country": "AL",
+    "datastakeId": "PRJ-00000000114",
+    "title": "Pietra's Project",
+    "sectoralScope": "fugitiveEmissionsFromIndustrialGases",
+    "sdgs": [],
+    "authorId": "df5378ae-704a-4a46-93b2-336cc5341456",
+    "percentageCompletion": 25,
+    "author": {
+      "name": "Geri SHPK",
+      "country": "AL",
+      "category": "civilSociety",
+      "subCategory": "internationalNGO"
+    }
+  }
+];
+
+export const storyConfig = {
+  data: transformProjectsToGlobeData(sampleProjects),
+  type: "project",
+  primaryLink: true,
+  showSider: true,
+  siderTitle: "Project Details",
+  renderTooltip: (project) => {
+    return [
+      { label: "Project ID", value: project.projectData?.datastakeId || "N/A" },
+      { label: "Sector", value: project.projectData?.sectoralScope || "N/A" },
+      { label: "Completion", value: `${Math.round(project.projectData?.percentageCompletion || 0)}%` },
+      { label: "Country", value: project.projectData?.country || "N/A" },
+      { label: "Author", value: project.projectData?.author || "N/A" },
+      { label: "Created", value: project.projectData?.createdAt ? new Date(project.projectData.createdAt).toLocaleDateString() : "N/A" }
+    ];
+  },
+  renderSider: (activeMarker) => {
+    const project = activeMarker.data;
+    const projectData = project.projectData;
+    
+    return (
+      <div className="project-sider">
+        {projectData?.mainImage && (
+          <div className="project-image mb-3">
+            <img 
+              src={projectData.mainImage} 
+              alt={project.name}
+              style={{ width: '100%', height: '200px', objectFit: 'cover', borderRadius: '8px' }}
+            />
+          </div>
+        )}
+        
+        <div className="project-details">
+          <div className="detail-row mb-2">
+            <span className="label">Project ID:</span>
+            <span className="value">{projectData?.datastakeId || "N/A"}</span>
+          </div>
+          
+          <div className="detail-row mb-2">
+            <span className="label">Sectoral Scope:</span>
+            <span className="value">{projectData?.sectoralScope || "N/A"}</span>
+          </div>
+          
+          <div className="detail-row mb-2">
+            <span className="label">Completion:</span>
+            <span className="value">{Math.round(projectData?.percentageCompletion || 0)}%</span>
+          </div>
+          
+          <div className="detail-row mb-2">
+            <span className="label">Country:</span>
+            <span className="value">{projectData?.country || "N/A"}</span>
+          </div>
+          
+          <div className="detail-row mb-2">
+            <span className="label">Author:</span>
+            <span className="value">{projectData?.author || "N/A"}</span>
+          </div>
+          
+          <div className="detail-row mb-2">
+            <span className="label">Created:</span>
+            <span className="value">
+              {projectData?.createdAt ? new Date(projectData.createdAt).toLocaleDateString() : "N/A"}
+            </span>
+          </div>
+          
+          {project.description && (
+            <div className="detail-row mt-3">
+              <span className="label">Description:</span>
+              <p className="value mt-1" style={{ fontSize: '14px', lineHeight: '1.4' }}>
+                {project.description}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+  onClickLink: (project) => {
+    console.log('Project clicked:', project);
+    // You can add navigation logic here
+  }
+};

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

@@ -17,11 +17,6 @@ VerticalSteps.args = {
     { title: "Step 1", description: "This is the first step" },
     { title: "Step 2", description: "This is the second step" },
     { title: "Step 3", description: "This is the third step" },
-    { title: "Step 3", description: "This is the third step" },
-    { title: "Step 3", description: "This is the third step" },
-    { title: "Step 3", description: "This is the third step" },
-    { title: "Step 3", description: "This is the third step" },
-    { title: "Step 3", description: "This is the third step" },
   ],
 };
 

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

@@ -3,35 +3,16 @@ import { Steps } from "antd";
 import Widget from "../../Dashboard/Widget/index.jsx";
 import PropTypes from "prop-types";
 
-const DAFSteps = ({ direction = "vertical", current = 0, items = [], scrollThreshold = 4 }) => {
-  const shouldScroll = items.length > scrollThreshold;
-  
-  const scrollableStyles = shouldScroll ? {
-    ...(direction === "vertical" ? {
-      maxHeight: "300px",
-      overflowY: "auto",
-      overflowX: "hidden"
-    } : {
-      maxWidth: "100%",
-      overflowX: "auto",
-      overflowY: "hidden",
-      whiteSpace: "nowrap"
-    }),
-    padding: "8px",
-    marginRight: direction === "vertical" ? "-8px" : "0",
-    paddingRight: direction === "vertical" ? "16px" : "8px"
-  } : {};
-
+const DAFSteps = ({ direction = "vertical", current = 0, items = [] }) => {
   return (
-    <Widget title="Life Cycle" className="with-border-header">
-      <div style={scrollableStyles}>
-        <Steps
-          direction={direction}
-          current={current}
-          items={items}
-        />
-      </div>
+    <><Widget title="Life Cycle" className="with-border-header">
+      <Steps
+        direction={direction}
+        current={current}
+        items={items}
+      />
     </Widget>
+    </>
   );
 };
 
@@ -44,14 +25,12 @@ DAFSteps.propTypes = {
       description: PropTypes.string,
     })
   ),
-  scrollThreshold: PropTypes.number,
 };
 
 DAFSteps.defaultProps = {
   direction: "vertical",
   current: 0,
   items: [],
-  scrollThreshold: 4,
 };
 
 export default DAFSteps;

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

@@ -525,227 +525,6 @@ const PdfForm = ({
 
   const organizedForm = useMemo(() => organizeFormByHeaders(form), [form]);
 
-  // Constants for height calculations (same as PdfView)
-  const PAGE_HEIGHT = 1587;
-  const FOOTER_HEIGHT = 70;
-  const HEADER_HEIGHT = 100;
-
-  // Helper function to estimate tree node height based on content and type
-  const estimateTreeNodeHeight = (key, config, value, level = 0) => {
-    const baseHeight = 28; // Base height per tree node
-    const indentHeight = level * 2; // Additional height per level
-    let totalHeight = baseHeight + indentHeight;
-
-    // Adjust height based on node type
-    if (config?.type === 'header') {
-      totalHeight += 15; // Headers need more space
-    } else if (config?.type === 'textarea') {
-      totalHeight += 40; // Textareas are taller
-    } else if (config?.type === 'dataLink' || config?.type === 'dataLinkGroup') {
-      totalHeight += 20; // Data links often have more content
-    }
-
-    // Add height for value content if it exists
-    if (value && typeof value === 'string' && value.length > 50) {
-      totalHeight += Math.ceil(value.length / 50) * 15; // Multi-line content
-    }
-
-    // Add height for children recursively
-    if (config?.inputs) {
-      const childKeys = Object.keys(config.inputs)
-        .filter(childKey => {
-          const childConfig = config.inputs[childKey];
-          // Check showIf condition
-          if (childConfig?.showIf && !evaluateShowIfCondition(childConfig.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;
-        });
-      
-      childKeys.forEach(childKey => {
-        const childConfig = config.inputs[childKey];
-        const childValue = value?.[childKey] || data?.[childKey];
-        totalHeight += estimateTreeNodeHeight(childKey, childConfig, childValue, level + 1);
-      });
-    }
-
-    // Handle array/repeated content
-    if (Array.isArray(value)) {
-      value.forEach(itemValue => {
-        totalHeight += estimateTreeNodeHeight(key, config, itemValue, level);
-      });
-    }
-
-    return totalHeight;
-  };
-
-  // Helper function to split section based on height constraints (goes deep if needed)
-  const createHeightConstrainedSections = (sectionKey, section) => {
-    const MAX_SECTION_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - 150; // Conservative buffer
-    const subSections = [];
-    
-    // Get all top-level items in the section with detailed analysis
-    const topLevelItems = Object.keys(section)
-      .filter(key => !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle'))
-      .map(key => ({
-        key,
-        config: section[key],
-        estimatedHeight: estimateTreeNodeHeight(key, section[key], data?.[key]),
-        canSplit: section[key]?.inputs && Object.keys(section[key].inputs).length > 1 // Can this item be further split?
-      }))
-      .sort((a, b) => (a.config?.position || 0) - (b.config?.position || 0));
-
-    let currentSubSection = {
-      ...section,
-    };
-    
-    // Remove all items from the base section structure
-    Object.keys(section).forEach(key => {
-      if (!(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')) {
-        delete currentSubSection[key];
-      }
-    });
-
-    let currentHeight = 80; // Base height for section header
-    let subSectionIndex = 0;
-
-    topLevelItems.forEach((item, index) => {
-      const { key, config, estimatedHeight, canSplit } = item;
-      
-      // If a single item is too large and can be split, split it at the child level
-      if (estimatedHeight > MAX_SECTION_HEIGHT * 0.8 && canSplit) {
-        // Split this large item into smaller parts
-        const childSplits = splitLargeItem(key, config, data?.[key], MAX_SECTION_HEIGHT * 0.6);
-        
-        childSplits.forEach((splitItem, splitIndex) => {
-          // Check if current subsection has room
-          if (currentHeight + splitItem.estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
-            // Save current sub-section
-            subSections.push({
-              key: `${sectionKey}_part_${subSectionIndex}`,
-              section: { ...currentSubSection },
-              title: section.label
-            });
-
-            // Start new sub-section
-            currentSubSection = {
-              id: section.id,
-              label: section.label,
-              position: section.position + subSectionIndex + 1,
-              subTitle: section.subTitle
-            };
-            currentHeight = 80;
-            subSectionIndex++;
-          }
-
-          // Add split item to current sub-section
-          currentSubSection[splitItem.key] = splitItem.config;
-          currentHeight += splitItem.estimatedHeight;
-        });
-      } else {
-        // Regular processing for items that fit or can't be split
-        // Check if adding this item would exceed height limit
-        if (currentHeight + estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
-          // Save current sub-section
-          subSections.push({
-            key: `${sectionKey}_part_${subSectionIndex}`,
-            section: { ...currentSubSection },
-            title: section.label
-          });
-
-          // Start new sub-section
-          currentSubSection = {
-            id: section.id,
-            label: section.label,
-            position: section.position + subSectionIndex + 1,
-            subTitle: section.subTitle
-          };
-          currentHeight = 80;
-          subSectionIndex++;
-        }
-
-        // Add item to current sub-section
-        currentSubSection[key] = config;
-        currentHeight += estimatedHeight;
-      }
-    });
-
-    // Add the final sub-section if it has content
-    if (Object.keys(currentSubSection).length > 4) {
-      subSections.push({
-        key: subSectionIndex === 0 ? sectionKey : `${sectionKey}_part_${subSectionIndex}`,
-        section: currentSubSection,
-        title: section.label
-      });
-    }
-
-    return subSections.length > 0 ? subSections : [{
-      key: sectionKey,
-      section: section,
-      title: section.label
-    }];
-  };
-
-  // Helper function to split large items at the child level
-  const splitLargeItem = (parentKey, parentConfig, parentValue, maxHeight) => {
-    if (!parentConfig?.inputs) {
-      return [{ key: parentKey, config: parentConfig, estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue) }];
-    }
-
-    const childItems = Object.keys(parentConfig.inputs)
-      .filter(childKey => {
-        const childConfig = parentConfig.inputs[childKey];
-        return !childConfig?.showIf || evaluateShowIfCondition(childConfig.showIf, data);
-      })
-      .map(childKey => ({
-        key: childKey,
-        config: parentConfig.inputs[childKey],
-        estimatedHeight: estimateTreeNodeHeight(childKey, parentConfig.inputs[childKey], parentValue?.[childKey])
-      }))
-      .sort((a, b) => (a.config?.position || 0) - (b.config?.position || 0));
-
-    const splits = [];
-    let currentSplit = {
-      key: `${parentKey}_part_0`,
-      config: {
-        ...parentConfig,
-        inputs: {}
-      },
-      estimatedHeight: 40 // Base height for parent structure
-    };
-    let splitIndex = 0;
-
-    childItems.forEach(child => {
-      if (currentSplit.estimatedHeight + child.estimatedHeight > maxHeight && Object.keys(currentSplit.config.inputs).length > 0) {
-        splits.push(currentSplit);
-        splitIndex++;
-        currentSplit = {
-          key: `${parentKey}_part_${splitIndex}`,
-          config: {
-            ...parentConfig,
-            label: parentConfig.label,
-            inputs: {}
-          },
-          estimatedHeight: 40
-        };
-      }
-
-      currentSplit.config.inputs[child.key] = child.config;
-      currentSplit.estimatedHeight += child.estimatedHeight;
-    });
-
-    if (Object.keys(currentSplit.config.inputs).length > 0) {
-      splits.push(currentSplit);
-    }
-
-    return splits.length > 0 ? splits : [{ key: parentKey, config: parentConfig, estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue) }];
-  };
-
   const pdfConfig = useMemo(() => {
     const sections = [];
     
@@ -756,32 +535,27 @@ const PdfForm = ({
         return;
       }
 
-      // Create height-constrained sub-sections
-      const subSections = createHeightConstrainedSections(sectionKey, section);
-      
-      subSections.forEach(({ key, section: subSection, title }) => {
-        sections.push({
-          render: () => (
-            <div key={key} className="pdf-form-section">
-              <PdfFormContent
-                form={{ [key]: { ...subSection, label: title } }}
-                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'
-          }
-        });
+      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'
+        }
       });
     });
 

package/src/@daf/core/components/ViewForm/helper.js

@@ -144,7 +144,7 @@ export const filterInputs = (form, data, repeatValues) => {
 }
 
 export const getNkey = (namespace) => {
-  if (['location', 'scl', 'village', 'event', 'incidents', 'corrective-actions', 'testimonials', 'initiatives', 'victims', 'pictures', 'documents', 'lir', 'sp', 'im', 'sci', 'bpe', 'gm'].includes(namespace)) {
+  if (['location', 'scl', 'village', 'event', 'incidents', 'corrective-actions', 'testimonials', 'initiatives', 'victims', 'pictures', 'documents', 'lir', 'sp', 'im', 'sci', 'bpe', 'gm', 'project-readiness'].includes(namespace)) {
     return 'scoping';
   }