datastake-daf 0.6.278 → 0.6.280

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

@@ -1,284 +0,0 @@
-import SimpleGlobe from "./SimpleGlobe";
-import SimpleGlobeDebug from "./SimpleGlobeDebug";
-import ThemeLayout from "../../ThemeLayout";
-import Widget from "../Widget";
-
-// Sample project data
-const SAMPLE_PROJECTS = [
-  {
-    _id: "sample-1",
-    name: "Dakar Solar Initiative",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-001",
-    sectoralScope: "energy",
-    percentageCompletion: 75,
-    projectDescription: "Large-scale solar energy project in Dakar region",
-    latitude: 14.7167,
-    longitude: -17.4677,
-    author: { name: "Dakar Energy Co." }
-  },
-  {
-    _id: "sample-2", 
-    name: "Saint-Louis Wind Farm",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-002",
-    sectoralScope: "energy",
-    percentageCompletion: 45,
-    projectDescription: "Wind energy project in Saint-Louis region",
-    latitude: 16.0167,
-    longitude: -16.4833,
-    author: { name: "Wind Power Solutions" }
-  },
-  {
-    _id: "sample-3",
-    name: "Casamance Reforestation",
-    country: "SN", 
-    datastakeId: "PRJ-SAMPLE-003",
-    sectoralScope: "agricultureForestryAndOtherLandUse",
-    percentageCompletion: 60,
-    projectDescription: "Forest restoration project in Casamance region",
-    latitude: 12.5833,
-    longitude: -16.2667,
-    author: { name: "Green Casamance" }
-  },
-  {
-    _id: "sample-4",
-    name: "Lagos Tech Hub",
-    country: "NG",
-    datastakeId: "PRJ-SAMPLE-004",
-    sectoralScope: "technology",
-    percentageCompletion: 30,
-    projectDescription: "Technology innovation center in Lagos",
-    latitude: 6.5244,
-    longitude: 3.3792,
-    author: { name: "Lagos Tech Foundation" }
-  },
-  {
-    _id: "sample-5",
-    name: "Cairo Water Management",
-    country: "EG",
-    datastakeId: "PRJ-SAMPLE-005",
-    sectoralScope: "water",
-    percentageCompletion: 85,
-    projectDescription: "Water conservation project in Cairo",
-    latitude: 30.0444,
-    longitude: 31.2357,
-    author: { name: "Cairo Water Authority" }
-  }
-];
-
-export default {
-  title: "Dashboard/Globe/SimpleGlobe",
-  component: SimpleGlobe,
-  tags: ["autodocs"],
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: false,
-    onProjectClick: (project) => console.log('Project clicked:', project)
-  },
-  decorators: [
-    (Story) => (
-        <ThemeLayout>
-          <Widget title="Simple Globe with Project Pins" className="no-px no-pb-body">
-            <div style={{ width: '100%', height: '600px' }}>
-              <Story />
-            </div>
-          </Widget>
-        </ThemeLayout>
-    ),
-  ],
-};
-
-export const Default = {
-  name: "Default Project Globe",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: false
-  }
-};
-
-export const TestSimple = {
-  name: "Test Simple Data",
-  args: {
-    projects: [
-      {
-        name: "Test Project 1",
-        latitude: 14.7167,
-        longitude: -17.4677,
-        percentageCompletion: 75,
-        projectDescription: "Test project in Dakar"
-      },
-      {
-        name: "Test Project 2",
-        latitude: 16.0167,
-        longitude: -16.4833,
-        percentageCompletion: 45,
-        projectDescription: "Test project in Saint-Louis"
-      }
-    ],
-    showSider: true
-  }
-};
-
-export const WithSidebar = {
-  name: "With Sidebar",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true
-  }
-};
-
-export const CustomMapConfig = {
-  name: "Custom Map Configuration",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    mapConfig: {
-      maxZoom: 6,
-      minZoom: 2
-    }
-  }
-};
-
-export const SingleProject = {
-  name: "Single Project",
-  args: {
-    projects: [SAMPLE_PROJECTS[0]],
-    showSider: true
-  }
-};
-
-export const EmptyState = {
-  name: "Empty State",
-  args: {
-    projects: [],
-    showSider: false
-  }
-};
-
-export const LocationMarkers = {
-  name: "Location Markers (Map Pin Style)",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    type: "location"
-  }
-};
-
-export const CustomColorMarkers = {
-  name: "Custom Color Markers",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    color: "#FF6B6B"
-  }
-};
-
-export const LocationCustomColor = {
-  name: "Location Markers with Custom Color",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    type: "location",
-    color: "#4ECDC4"
-  }
-};
-
-export const CustomTooltip = {
-  name: "Custom Tooltip Function",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    type: "location",
-    color: "#4ECDC4",
-    renderTooltip: (project) => [
-      {
-        label: "Project Name",
-        value: project.name || 'N/A'
-      },
-      {
-        label: "Completion",
-        value: `${project.percentageCompletion || 0}%`,
-        color: project.percentageCompletion > 50 ? "#12b76a" : "#FF7A45"
-      },
-      {
-        label: "Country",
-        value: project.country || 'N/A'
-      }
-    ]
-  }
-};
-
-export const AdvancedCustomTooltip = {
-  name: "Advanced Custom Tooltip with Colors",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    type: "location",
-    color: "#4ECDC4",
-    renderTooltip: (project) => [
-      {
-        label: "Project Name",
-        value: project.name || 'N/A'
-      },
-      {
-        label: "Sector",
-        value: project.sectoralScope || 'Project',
-        color: "#12b76a"
-      },
-      {
-        label: "Completion Status",
-        value: project.percentageCompletion > 75 ? "High" : project.percentageCompletion > 50 ? "Medium" : "Low",
-        color: project.percentageCompletion > 75 ? "#12b76a" : project.percentageCompletion > 50 ? "#FF7A45" : "#F04438"
-      },
-      {
-        label: "Completion %",
-        value: `${project.percentageCompletion || 0}%`
-      },
-      {
-        label: "Author",
-        value: project.author?.name || 'N/A'
-      },
-      {
-        label: "Project ID",
-        value: project.datastakeId || 'N/A'
-      }
-    ]
-  }
-};
-
-export const MinimalTooltip = {
-  name: "Minimal Custom Tooltip",
-  args: {
-    projects: SAMPLE_PROJECTS,
-    showSider: true,
-    type: "location",
-    color: "#4ECDC4",
-    renderTooltip: (project) => [
-      {
-        label: "Name",
-        value: project.name || 'N/A'
-      },
-      {
-        label: "Progress",
-        value: `${project.percentageCompletion || 0}%`
-      }
-    ]
-  }
-};
-
-export const DebugVersion = {
-  name: "Debug Version (Direct Mapbox)",
-  render: () => (
-    <div style={{ margin: "3em" }}>
-      <ThemeLayout>
-        
-        <Widget title="Debug Globe (Direct Mapbox)" className="no-px no-pb-body">
-          <div style={{ width: '100%', height: '600px' }}>
-            <SimpleGlobeDebug projects={SAMPLE_PROJECTS} />
-          </div>
-        </Widget>
-      </ThemeLayout>
-    </div>
-  )
-};

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

@@ -1,85 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-
-const SimpleGlobeDebug = ({ projects = [] }) => {
-  const mapContainer = useRef(null);
-  const map = useRef(null);
-
-  useEffect(() => {
-    if (map.current) return; // Initialize map only once
-
-    // Set Mapbox access token
-    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
-
-    console.log('🗺️ [DEBUG] Creating map...');
-    
-    // Create map
-    map.current = new mapboxgl.Map({
-      container: mapContainer.current,
-      style: 'mapbox://styles/mapbox/satellite-v9',
-      center: [0, 0],
-      zoom: 3,
-      projection: 'globe'
-    });
-
-    // Add markers when map loads
-    map.current.on('load', () => {
-      console.log('🗺️ [DEBUG] Map loaded, adding markers...');
-      
-      projects.forEach((project, index) => {
-        console.log(`📍 [DEBUG] Adding marker ${index}:`, project);
-        
-        // Create marker element
-        const el = document.createElement('div');
-        el.className = 'mapboxgl-marker';
-        el.style.width = '20px';
-        el.style.height = '20px';
-        el.style.backgroundColor = '#00809E';
-        el.style.borderRadius = '50%';
-        el.style.border = '2px 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.innerHTML = `<span>${project.percentageCompletion || 0}</span>`;
-
-        // Create popup
-        const popup = new mapboxgl.Popup({ offset: 25 })
-          .setHTML(`
-            <div>
-              <h3>${project.name}</h3>
-              <p>${project.projectDescription || 'No description'}</p>
-              <p>Completion: ${project.percentageCompletion || 0}%</p>
-            </div>
-          `);
-
-        // Add marker to map
-        new mapboxgl.Marker(el)
-          .setLngLat([project.longitude, project.latitude])
-          .setPopup(popup)
-          .addTo(map.current);
-          
-        console.log(`✅ [DEBUG] Marker ${index} added at:`, [project.longitude, project.latitude]);
-      });
-    });
-
-    return () => {
-      if (map.current) {
-        map.current.remove();
-        map.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <div style={{ width: '100%', height: '600px', border: '2px solid #ccc' }}>
-      <div ref={mapContainer} style={{ width: '100%', height: '100%' }} />
-    </div>
-  );
-};
-
-export default SimpleGlobeDebug;

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import SimpleGlobe from './SimpleGlobe';
-
-// Your sample project data
-const SAMPLE_PROJECTS = [
-  {
-    _id: "sample-1",
-    name: "Dakar Solar Initiative",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-001",
-    sectoralScope: "energy",
-    percentageCompletion: 75,
-    projectDescription: "Large-scale solar energy project in Dakar region",
-    latitude: 14.7167,
-    longitude: -17.4677,
-    author: { name: "Dakar Energy Co." }
-  },
-  {
-    _id: "sample-2", 
-    name: "Saint-Louis Wind Farm",
-    country: "SN",
-    datastakeId: "PRJ-SAMPLE-002",
-    sectoralScope: "energy",
-    percentageCompletion: 45,
-    projectDescription: "Wind energy project in Saint-Louis region",
-    latitude: 16.0167,
-    longitude: -16.4833,
-    author: { name: "Wind Power Solutions" }
-  },
-  {
-    _id: "sample-3",
-    name: "Casamance Reforestation",
-    country: "SN", 
-    datastakeId: "PRJ-SAMPLE-003",
-    sectoralScope: "agricultureForestryAndOtherLandUse",
-    percentageCompletion: 60,
-    projectDescription: "Forest restoration project in Casamance region",
-    latitude: 12.5833,
-    longitude: -16.2667,
-    author: { name: "Green Casamance" }
-  }
-];
-
-/**
- * SimpleGlobeExample - Example usage of the SimpleGlobe component
- * 
- * This shows how easy it is to display your project data as pins on a 3D globe.
- * Just pass your project array to the SimpleGlobe component!
- */
-const SimpleGlobeExample = () => {
-  const handleProjectClick = (projectData) => {
-    console.log('Project clicked:', projectData);
-    // You can add your custom logic here, like:
-    // - Navigate to project details page
-    // - Show project information in a modal
-    // - Update application state
-    alert(`Clicked on: ${projectData.name}\nCompletion: ${projectData.percentageCompletion}%`);
-  };
-
-  return (
-    <div style={{ width: '100%', height: '600px' }}>
-      <SimpleGlobe
-        projects={SAMPLE_PROJECTS}
-        showSider={true}
-        onProjectClick={handleProjectClick}
-        mapConfig={{
-          maxZoom: 8,
-          minZoom: 2
-        }}
-      />
-    </div>
-  );
-};
-
-export default SimpleGlobeExample;

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import SimpleGlobe from './SimpleGlobe';
-
-// Test with a simple, known working dataset
-const TEST_PROJECTS = [
-  {
-    _id: "test-1",
-    name: "Test Project 1",
-    latitude: 14.7167,
-    longitude: -17.4677,
-    percentageCompletion: 75,
-    projectDescription: "Test project in Dakar"
-  },
-  {
-    _id: "test-2", 
-    name: "Test Project 2",
-    latitude: 16.0167,
-    longitude: -16.4833,
-    percentageCompletion: 45,
-    projectDescription: "Test project in Saint-Louis"
-  }
-];
-
-const SimpleGlobeTest = () => {
-  console.log('🧪 [SIMPLE GLOBE TEST] Test projects:', TEST_PROJECTS);
-
-  const handleProjectClick = (projectData) => {
-    console.log('🧪 [SIMPLE GLOBE TEST] Project clicked:', projectData);
-    alert(`Clicked: ${projectData.name} at ${projectData.gps?.latitude}, ${projectData.gps?.longitude}`);
-  };
-
-  return (
-    <div style={{ width: '100%', height: '600px', border: '2px solid #ccc' }}>
-      <h3>SimpleGlobe Test</h3>
-      <SimpleGlobe
-        projects={TEST_PROJECTS}
-        showSider={true}
-        onProjectClick={handleProjectClick}
-        mapConfig={{
-          maxZoom: 8,
-          minZoom: 2
-        }}
-      />
-    </div>
-  );
-};
-
-export default SimpleGlobeTest;