datastake-daf 0.6.294 → 0.6.296

package/dist/utils/index.js

@@ -6273,6 +6273,9 @@ const userHasInterface = (user, app, intf) => {
 };
 
 const en = {
+  "No planning required": "No planning required",
+  "No evaluation required": "No evaluation required",
+  "No improvement required": "No improvement required",
   "Currently unavailable": "Currently unavailable",
   Description: "Description",
   "missing-inputs": "Missing Inputs",
@@ -7466,6 +7469,9 @@ const en = {
 };
 
 const fr = {
+  "No planning required": "Pas de planification requise",
+  "No evaluation required": "Pas d'évaluation requise",
+  "No improvement required": "Pas d'amélioration requise",
   "Currently unavailable": "Actuellement indisponible",
   "Description": "Description",
   "missing-inputs": "Données Manquantes",
@@ -9299,6 +9305,9 @@ const fr = {
 };
 
 const sp = {
+  "No planning required": "No se requiere planeación",
+  "No evaluation required": "No se requiere evaluación",
+  "No improvement required": "No se requiere mejora",
   "Currently unavailable": "Actualmente no disponible",
   "Description": "Descripción",
   "missing-inputs": "Datos que Faltan",

package/package.json

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

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.jsx

@@ -47,63 +47,16 @@ const SimpleGlobe = ({
     // Set Mapbox access token
     mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
 
-    // Create map with custom Straatos style - 3D globe configuration
+    // Create map with custom Straatos style
     map.current = new mapboxgl.Map({
       container: mapContainer.current,
       style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
       center: [0, 0],
       zoom: mapConfig.maxZoom || 3,
       projection: 'globe',
-      // 3D globe settings for proper rendering
-      pitch: 0,
-      bearing: 0,
-      antialias: true,
-      fadeDuration: 0,
       attributionControl: false
     });
 
-    // Configure 3D globe when style loads
-    map.current.on('style.load', () => {
-      console.log('🎨 [SIMPLE GLOBE] Style loaded, configuring 3D globe...');
-      
-      // Set fog for the space background effect with stars
-      try {
-        map.current.setFog({
-          'color': 'rgb(0, 0, 0)',
-          'high-color': 'rgb(0, 0, 0)',
-          'horizon-blend': 0.1,
-          'space-color': 'rgb(0, 0, 0)',
-          'star-intensity': 0.6
-        });
-        console.log('✨ [SIMPLE GLOBE] Space background with stars set');
-      } catch (e) {
-        console.log('⚠️ [SIMPLE GLOBE] Could not set fog, trying alternative...');
-        // Fallback: try simpler fog configuration
-        try {
-          map.current.setFog({
-            'color': 'rgb(0, 0, 0)',
-            'high-color': 'rgb(0, 0, 0)',
-            'horizon-blend': 0.1
-          });
-          console.log('✨ [SIMPLE GLOBE] Alternative space background set');
-        } catch (e2) {
-          console.log('⚠️ [SIMPLE GLOBE] Could not set any fog configuration');
-        }
-      }
-      
-      // Set lighting for better 3D globe visibility
-      try {
-        map.current.setLight({
-          'anchor': 'viewport',
-          'color': 'white',
-          'intensity': 0.4
-        });
-        console.log('💡 [SIMPLE GLOBE] Lighting configured for 3D globe');
-      } catch (e) {
-        console.log('⚠️ [SIMPLE GLOBE] Could not set lighting');
-      }
-    });
-
     // Add markers when map loads
     map.current.on('load', () => {
       console.log('🗺️ [SIMPLE GLOBE] Map loaded, adding markers...');
@@ -124,42 +77,52 @@ const SimpleGlobe = ({
         .mapboxgl-canvas {
           overflow: hidden !important;
         }
-        
-        /* Namespace Mapbox styles to avoid Leaflet interference */
-        .daf-simple-globe-container .mapboxgl-marker {
-          position: absolute !important; /* let Mapbox control positioning */
-          transform: none !important; /* let Mapbox handle positioning for 3D globe */
-          left: auto !important;
-          top: auto !important;
-          z-index: 1000 !important; /* ensure markers are visible */
-        }
-        
-        .daf-simple-globe-container .mapboxgl-marker-pane {
-          position: absolute !important;
-          z-index: 1000 !important;
-        }
-        
-        .daf-simple-globe-container .mapboxgl-canvas {
-          position: absolute !important;
-          top: 0;
-          left: 0;
-        }
-        
+        /* CRITICAL: Override Leaflet CSS interference with Mapbox */
         .daf-simple-globe-container .mapboxgl-canvas-container {
           position: relative !important;
           left: auto !important;
           top: auto !important;
         }
-        
         .daf-simple-globe-container .mapboxgl-canvas-container canvas {
-          position: absolute !important;
-          top: 0;
-          left: 0;
+          position: relative !important;
+          left: auto !important;
+          top: auto !important;
           transform: none !important;
         }
+        /* Prevent Leaflet styles from affecting Mapbox markers */
+        .daf-simple-globe-container .daf-globe-marker {
+          position: relative !important;
+          left: auto !important;
+          top: auto !important;
+        }
       `;
       document.head.appendChild(style);
       
+      // Set the space background with stars
+      try {
+        map.current.setFog({
+          'color': 'rgb(0, 0, 0)',
+          'high-color': 'rgb(0, 0, 0)',
+          'horizon-blend': 0.1,
+          'space-color': 'rgb(0, 0, 0)',
+          'star-intensity': 0.6
+        });
+        console.log('✨ [SIMPLE GLOBE] Space background with stars set');
+      } catch (e) {
+        console.log('⚠️ [SIMPLE GLOBE] Could not set fog, trying alternative...');
+        // Fallback: try simpler fog configuration
+        try {
+          map.current.setFog({
+            'color': 'rgb(0, 0, 0)',
+            'high-color': 'rgb(0, 0, 0)',
+            'horizon-blend': 0.1
+          });
+          console.log('✨ [SIMPLE GLOBE] Alternative space background set');
+        } catch (e2) {
+          console.log('⚠️ [SIMPLE GLOBE] Could not set any fog configuration');
+        }
+      }
+      
       // Calculate bounds to fit all markers
       const bounds = new mapboxgl.LngLatBounds();
       let hasValidCoordinates = false;
@@ -258,32 +221,20 @@ const SimpleGlobe = ({
         const lng = Number(project.longitude);
         const lat = Number(project.latitude);
         
-        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { 
-          lng, 
-          lat, 
-          project: project.name 
-        });
+        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { lng, lat });
         
         // Validate coordinates
         if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { 
-            lng, 
-            lat, 
-            project: project.name 
-          });
+          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { lng, lat });
           return;
         }
-        console.log(`📍 Marker ${index} coordinates:`, { lng, lat });
 
         // Add coordinates to bounds
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Create marker with explicit positioning and anchor for 3D globe
-        const marker = new mapboxgl.Marker({
-          element: el,
-          anchor: 'center' // Use center anchor for 3D globe positioning
-        })
+        // Add marker to map with proper coordinate order [lng, lat]
+        const marker = new mapboxgl.Marker(el)
           .setLngLat([lng, lat])
           .setPopup(popup)
           .addTo(map.current);
@@ -293,17 +244,6 @@ const SimpleGlobe = ({
           console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
           onProjectClick(project);
         });
-        
-        // Verify marker position after a short delay (like other Globe components)
-        setTimeout(() => {
-          const markerLngLat = marker.getLngLat();
-          console.log(`🔍 [SIMPLE GLOBE] Marker ${index} position verification:`, {
-            expected: [lng, lat],
-            actual: [markerLngLat.lng, markerLngLat.lat],
-            project: project.name,
-            match: Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001
-          });
-        }, 100);
           
         console.log(`✅ [SIMPLE GLOBE] Marker ${index} added at:`, [lng, lat]);
       });
@@ -320,14 +260,6 @@ const SimpleGlobe = ({
       } else {
         boundsRef.current = null;
       }
-      
-      // Force resize for 3D globe rendering
-      setTimeout(() => {
-        if (map.current && map.current.resize) {
-          map.current.resize();
-          console.log('🔄 [SIMPLE GLOBE] Map resized for 3D globe rendering');
-        }
-      }, 100);
     });
 
     return () => {

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

@@ -1,7 +1,5 @@
 import SimpleGlobe from "./SimpleGlobe";
 import SimpleGlobeDebug from "./SimpleGlobeDebug";
-import NoConflictGlobe from "./NoConflictGlobe";
-import CSSInJSGlobe from "./CSSInJSGlobe";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget";
 
@@ -284,33 +282,3 @@ export const DebugVersion = {
     </div>
   )
 };
-
-export const NoConflictVersion = {
-  name: "No Conflict Version (Aggressive CSS Isolation)",
-  render: () => (
-    <div style={{ margin: "3em" }}>
-      <ThemeLayout>
-        <Widget title="No Conflict Globe (Aggressive CSS Isolation)" className="no-px no-pb-body">
-          <div style={{ width: '100%', height: '600px' }}>
-            <NoConflictGlobe projects={SAMPLE_PROJECTS} type="location" color="#4ECDC4" />
-          </div>
-        </Widget>
-      </ThemeLayout>
-    </div>
-  )
-};
-
-export const CSSInJSVersion = {
-  name: "CSS-in-JS Version (No External CSS)",
-  render: () => (
-    <div style={{ margin: "3em" }}>
-      <ThemeLayout>
-        <Widget title="CSS-in-JS Globe (No External CSS)" className="no-px no-pb-body">
-          <div style={{ width: '100%', height: '600px' }}>
-            <CSSInJSGlobe projects={SAMPLE_PROJECTS} type="location" color="#4ECDC4" />
-          </div>
-        </Widget>
-      </ThemeLayout>
-    </div>
-  )
-};

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

@@ -1,5 +1,10 @@
 import React from "react";
 import DAFSteps from "./index";
+import DashboardLayout from "../DashboardLayout/index.jsx";
+import KeyIndicators from "../Widget/KeyIndicators/index.jsx";
+import ActionWidget from "../Widget/ActionWidget/index.jsx";
+import Widget from "../Widget/index.jsx";
+import ThemeLayout from "../../ThemeLayout";
 
 export default {
   title: "Dashboard/Steps",
@@ -14,7 +19,7 @@ VerticalSteps.args = {
   direction: "vertical",
   current: 1,
   items: [
-    { title: "Step 1", description: "This is the first step" },
+    { title: "Project Created & Project Area Identification", 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" },
@@ -34,4 +39,73 @@ HorizontalSteps.args = {
     { title: "Step 2", description: "This is the second step" },
     { title: "Step 3", description: "This is the third step" },
   ],
-};
+};
+
+export const MultipleWidgets = {
+  name: "Multiple Widgets in Row",
+  decorators: [
+    (Story) => (
+      <ThemeLayout>
+        <DashboardLayout>
+          <Story />
+        </DashboardLayout>
+      </ThemeLayout>
+    ),
+  ],
+  render: () => {
+    return (
+      <>
+        <section style={{display: 'flex', flexDirection: 'row', gap: '10px'}}>
+            <DAFSteps
+              direction="vertical"
+              current={1}
+              items={[
+                { title: "Project Created & Project Area Identification Project Created & Project Area Identification", description: "This is the first step" },
+                { title: "Data Collection", description: "This is the second step" },
+                { title: "Analysis", description: "This is the third step" },
+                { title: "Reporting", description: "This is the fourth step" },
+              ]}
+            />
+          <Widget title="Actions" className="with-border-header">
+            <div style={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px'}}>
+              <ActionWidget
+                icon="Search"
+                title="Find Information"
+                onClick={() => console.log('Find Information clicked')}
+              />
+              <ActionWidget
+                icon="Plus"
+                title="Add New Project"
+                onClick={() => console.log('Add New Project clicked')}
+              />
+              <ActionWidget
+                icon="FileText"
+                title="Generate Report"
+                onClick={() => console.log('Generate Report clicked')}
+              />
+            </div>
+          </Widget>          
+          <Widget title="Actions" className="with-border-header">
+            <div style={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px'}}>
+              <ActionWidget
+                icon="Search"
+                title="Find Information"
+                onClick={() => console.log('Find Information clicked')}
+              />
+              <ActionWidget
+                icon="Plus"
+                title="Add New Project"
+                onClick={() => console.log('Add New Project clicked')}
+              />
+              <ActionWidget
+                icon="FileText"
+                title="Generate Report"
+                onClick={() => console.log('Generate Report clicked')}
+              />
+            </div>
+          </Widget>
+        </section>
+      </>
+    );
+  },
+};

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Steps } from "antd";
 import Widget from "../../Dashboard/Widget/index.jsx";
 import PropTypes from "prop-types";
+import { Style } from "./style";
 
 const DAFSteps = ({ direction = "vertical", current = 0, items = [], scrollThreshold = 4 }) => {
   const shouldScroll = items.length > scrollThreshold;
@@ -25,11 +26,13 @@ const DAFSteps = ({ direction = "vertical", current = 0, items = [], scrollThres
   return (
     <Widget title="Life Cycle" className="with-border-header">
       <div style={scrollableStyles}>
-        <Steps
-          direction={direction}
-          current={current}
-          items={items}
-        />
+        <Style>
+          <Steps
+            direction={direction}
+            current={current}
+            items={items}
+          />
+        </Style>
       </div>
     </Widget>
   );

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Style = styled.div`
+  .ant-steps-item-title {
+    line-height: normal !important;
+  }
+`;

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

@@ -1,3 +1,3 @@
-import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig3";
+import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig2";
 
 export { getApiBaseUrl, getAppHeader, storyData };