datastake-daf 0.6.121 → 0.6.123

package/package.json

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

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

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
-const PAGE_HEIGHT = 3508;
+const PAGE_HEIGHT = 1587;
 // margin-top: 20, bottom: 20;
-const FOOTER_HEIGHT = 40;
+const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
@@ -66,18 +66,12 @@ export default function PdfView({
 
       keys.forEach((k, i) => {
         const { height, ref } = sectionsConfig[k];
-      
+
         if (i === 0) {
-          const availableSpace = PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT;
-          if (height > availableSpace) {
-            ref.current.style.marginTop = '30px';
-            incrHeight = 30;
-          } else {
-            ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-            incrHeight = HEADER_HEIGHT;
-          }
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
+          incrHeight += HEADER_HEIGHT;
         }
-      
+
         const newHeight = incrHeight + height;
 
         if (i === keys.length - 1) {

package/src/@daf/core/components/Dashboard/Widget/_style.scss

@@ -6,42 +6,6 @@
   position: relative;
   flex-direction: column;
 
-  // Widget Catalogue specific styles
-  &.widget-catalogue {
-    padding: var(--size-lg);
-    
-    @media (max-width: 850px) {
-      padding: var(--size);
-    }
-
-    .grid {
-      display: grid;
-      gap: 1.5rem;
-      
-      @media (min-width: 768px) {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      
-      @media (min-width: 1024px) {
-        grid-template-columns: repeat(3, 1fr);
-      }
-      
-      @media (min-width: 1280px) {
-        grid-template-columns: repeat(4, 1fr);
-      }
-    }
-
-    .ant-card {
-      transition: all 0.2s ease-in-out;
-      border: 1px solid #e5e7eb;
-      
-      &:hover {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        transform: translateY(-2px);
-      }
-    }
-  }
-
   .month-select {
     min-width: 165px;
     max-width: 165px;

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

@@ -142,7 +142,7 @@ export const handleDataLinkGroupWithTableKeys = ({
             label: uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey,
             type: inputConfig?.type
           };
-          values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item?.[tableKey];
+          values[tableKey] = item?.[tableKey];
         }
       });
 

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

@@ -90,7 +90,7 @@ export const handleDataLinkWithTableKeys = ({
             inputs[tableKey].label = resolvedLabel || Object.values(formInputConfig.label)[0] || 
               (uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey);
           }
-          values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[tableKey]; 
+          values[tableKey] = item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[tableKey]; 
         } else {
           inputs[tableKey] = {
             label: uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey,
@@ -139,7 +139,7 @@ export const handleDataLinkWithTableKeys = ({
             inputs[fieldKey].label = resolvedLabel || Object.values(formInputConfig.label)[0] || 
               (uploadTypeFields.includes(fieldKey) ? uploadTypeLabels[fieldKey] : fieldKey);
           }
-          values[fieldKey] = item?.linking?.SCL?.[item?.[fieldKey]]?.name || item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[fieldKey];
+          values[fieldKey] = item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[fieldKey];
         });
     }
 

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

@@ -409,6 +409,7 @@ const PdfForm = ({
   getAppHeader = () => {},
   app
 }) => {
+  // Group objects under headers based on position
   const organizeFormByHeaders = (formData) => {
     const organizedSections = {};
     
@@ -419,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');
@@ -433,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];
@@ -457,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;
           });
         }
@@ -478,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) => {
@@ -507,124 +516,37 @@ const PdfForm = ({
   const pdfConfig = useMemo(() => {
     const sections = [];
     
-    // Function to count the complexity/size of a section
-    const getSectionComplexity = (section) => {
-      let complexity = 0;
-      const countInputs = (obj) => {
-        if (!obj || typeof obj !== 'object') return 0;
-        
-        let count = 0;
-        Object.keys(obj).forEach(key => {
-          if (key === 'inputs' && obj[key]) {
-            count += Object.keys(obj[key]).length;
-            // Recursively count nested inputs
-            Object.values(obj[key]).forEach(input => {
-              count += countInputs(input);
-            });
-          } else if (typeof obj[key] === 'object' && obj[key] !== null) {
-            count += countInputs(obj[key]);
-          }
-        });
-        return count;
-      };
-      
-      complexity += countInputs(section);
-      return complexity;
-    };
-  
-    // Function to split a section into smaller chunks
-    const splitSection = (sectionKey, section, maxComplexity = 15) => {
-      const complexity = getSectionComplexity(section);
-      
-      if (complexity <= maxComplexity) {
-        // Section is small enough, return as-is
-        return [{
-          key: sectionKey,
-          section: section,
-          title: formName,
-          isFirstPart: true,
-          isLastPart: true
-        }];
-      }
-  
-      // Section is too large, split it
-      const chunks = [];
-      const sectionInputs = 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;
-        });
-  
-      const chunkSize = Math.ceil(sectionInputs.length / Math.ceil(complexity / maxComplexity));
-      
-      for (let i = 0; i < sectionInputs.length; i += chunkSize) {
-        const chunkInputs = sectionInputs.slice(i, i + chunkSize);
-        const chunkSection = {
-          ...section,
-          label: `${section.label} ${chunks.length > 0 ? `(Part ${chunks.length + 1})` : ''}`
-        };
-  
-        // Remove all inputs first
-        Object.keys(chunkSection).forEach(key => {
-          if (!(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')) {
-            delete chunkSection[key];
-          }
-        });
-  
-        // Add only the inputs for this chunk
-        chunkInputs.forEach(inputKey => {
-          chunkSection[inputKey] = section[inputKey];
-        });
-  
-        chunks.push({
-          key: `${sectionKey}_chunk_${chunks.length}`,
-          section: chunkSection,
-          title: chunks.length === 0 ? formName : '', // Only show title on first chunk
-          isFirstPart: chunks.length === 0,
-          isLastPart: i + chunkSize >= sectionInputs.length
-        });
-      }
-  
-      return chunks;
-    };
-  
     Object.keys(organizedForm).forEach((sectionKey) => {
       const section = organizedForm[sectionKey];
       
       if (typeof section !== 'object' || !section.label) {
         return;
       }
-  
-      const sectionChunks = splitSection(sectionKey, section);
-      
-      sectionChunks.forEach((chunk) => {
-        sections.push({
-          render: () => (
-            <div key={chunk.key} className="pdf-form-section">
-              <PdfFormContent
-                form={{ [chunk.key]: chunk.section }}
-                data={data}
-                t={t}
-                user={user}
-                title={chunk.title}
-                source={chunk.isFirstPart ? source : ''}
-                version={chunk.isFirstPart ? version : ''}
-                getApiBaseUrl={getApiBaseUrl}
-                getAppHeader={getAppHeader}
-                app={app}
-              />
-            </div>
-          ),
-          style: {
-            marginBottom: chunk.isLastPart ? '20px' : '10px',
-            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'
+        }
       });
     });
-  
+
     return sections;
   }, [organizedForm, data, t, getApiBaseUrl, getAppHeader, app, formName, source, version]);
 

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

@@ -1343,7 +1343,7 @@ export const storyData = {
         }
     },
     data: {
-        "_id": "68c1930d459dca833f27c72b",
+        "_id": "68bea82c811b1cf197c94a70",
         "createdAt": "2025-09-08T09:55:56.733Z",
         "updatedAt": "2025-09-08T10:05:59.817Z",
         "form": "stakeholder",
@@ -1672,7 +1672,7 @@ export const storyData = {
         "maleMembers": 3,
         "namespace": "registration",
         "phoneNumber": "+57 12 359 4378 3",
-        "stakeholderId": "68c1930d459dca833f27c72b",
+        "stakeholderId": "68bea82c811b1cf197c94a70",
         "taxNr": "TTTTT123456789",
         "website": null
     },

package/src/@daf/core/components/PdfForm/style.scss

@@ -10,11 +10,6 @@
     align-items: center;
     margin-bottom: 10px;
     padding: 20px 0 0 0;
-    page-break-inside: avoid;
-    page-break-after: avoid;
-    break-inside: avoid;
-    top: 0;
-    z-index: 100;
     
     .company-name {
       font-size: 20px;
@@ -87,10 +82,6 @@
   
   .pdf-form-content {
     margin-top: 30px;
-    page-break-inside: auto;
-    page-break-after: auto;
-    break-inside: auto;
-    break-after: auto;
     
     .pdf-tree {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

package/src/@daf/core/components/ProgressTabs/ProgressTabs.stories.js

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { CheckOutlined, ScanOutlined, FileTextOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import ProgressTabs from './index';
+
+export default {
+  title: 'Components/ProgressTabs',
+  component: ProgressTabs,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: {
+      control: { type: 'select', options: ['setup', 'scan', 'review', 'status'] },
+      description: 'Current selected value',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when selection changes',
+    },
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState(args.value || 'setup');
+  
+  const handleChange = (newValue) => {
+    setValue(newValue);
+    args.onChange?.(newValue);
+  };
+
+  return (
+    <div style={{ width: '600px', padding: '20px' }}>
+      <ProgressTabs 
+        {...args} 
+        value={value} 
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 'setup',
+};
+
+export const SecondStep = Template.bind({});
+SecondStep.args = {
+  value: 'scan',
+};
+
+export const ThirdStep = Template.bind({});
+ThirdStep.args = {
+  value: 'review',
+};
+
+export const LastStep = Template.bind({});
+LastStep.args = {
+  value: 'status',
+};
+
+export const CustomOptions = Template.bind({});
+CustomOptions.args = {
+  value: 'data',
+  options: [
+    { label: 'Initial Setup', value: 'init' },
+    { label: 'Data Collection', value: 'data' },
+    { label: 'Analysis', value: 'analysis' },
+    { label: 'Final Report', value: 'report' }
+  ],
+};
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+  value: 'setup',
+  options: [
+    { label: 'Set Up', value: 'setup', icon: <CheckOutlined /> },
+    { label: 'Project Scan', value: 'scan', icon: <ScanOutlined /> },
+    { label: 'Review & Submission', value: 'review', icon: <FileTextOutlined /> },
+    { label: 'Submission Status', value: 'status', icon: <CheckCircleOutlined /> }
+  ],
+};
+
+export const WithDisabled = Template.bind({});
+WithDisabled.args = {
+  value: 'setup',
+  options: [
+    { label: 'Set Up', value: 'setup' },
+    { label: 'Project Scan', value: 'scan', isDisabled: true },
+    { label: 'Review & Submission', value: 'review', isDisabled: true },
+    { label: 'Submission Status', value: 'status', isDisabled: true }
+  ],
+};
+
+export const WithIconsAndDisabled = Template.bind({});
+WithIconsAndDisabled.args = {
+  value: 'setup',
+  options: [
+    { label: 'Set Up', value: 'setup', icon: <CheckOutlined /> },
+    { label: 'Project Scan', value: 'scan', icon: <ScanOutlined />, isDisabled: true },
+    { label: 'Review & Submission', value: 'review', icon: <FileTextOutlined />, isDisabled: true },
+    { label: 'Submission Status', value: 'status', icon: <CheckCircleOutlined />, isDisabled: true }
+  ],
+};
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+  value: 'scan',
+  width: '400px',
+};
+
+export const SmallWidth = Template.bind({});
+SmallWidth.args = {
+  value: 'review',
+  width: '300px',
+};
+
+

package/src/@daf/core/components/ProgressTabs/_index.scss

@@ -0,0 +1,100 @@
+.progress-tabs {
+  width: 100%;
+  padding: 16px 0;
+
+  &__segmented {
+    .ant-segmented {
+      background: #f8f9fa;
+      border-radius: 8px;
+      padding: 4px;
+      border: 1px solid #e6e7eb;
+      width: 100%;
+      height: 36px;
+    }
+
+    .ant-segmented-group {
+      display: flex;
+      width: 100%;
+    }
+
+    .ant-segmented-item {
+      flex: 1;
+      text-align: center;
+      border: none;
+      background: transparent;
+      margin: 0;
+      padding: 8px 16px;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+      font-size: 14px;
+      font-weight: 500;
+      color: #6b7280;
+      position: relative;
+      
+      &:hover:not(.ant-segmented-item-disabled) {
+        color: #6b7280;
+        background: rgba(255, 255, 255, 0.5);
+      }
+
+      &.ant-segmented-item-selected {
+        background: #ffffff;
+        color: #374151;
+        font-weight: 600;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+
+      &.ant-segmented-item-disabled {
+        color: #d1d5db;
+        cursor: not-allowed;
+        opacity: 0.5;
+        
+        &:hover {
+          background: transparent;
+          color: #d1d5db;
+        }
+      }
+    }
+
+    // Custom option content styling
+    .progress-tabs__option-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .progress-tabs__icon {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+    }
+
+    .progress-tabs__label {
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-segmented-thumb {
+      display: none;
+    }
+  }
+
+  // Responsive design
+  @media (max-width: 768px) {
+    &__segmented {
+      .ant-segmented-item {
+        font-size: 12px;
+        padding: 6px 12px;
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    &__segmented {
+      .ant-segmented-item {
+        font-size: 11px;
+        padding: 4px 8px;
+      }
+    }
+  }
+}