datastake-daf 0.6.121 → 0.6.123

package/src/@daf/core/components/ProgressTabs/demo.jsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Button, Space } from 'antd';
+import { CheckOutlined, ScanOutlined, FileTextOutlined, CheckCircleOutlined, LockOutlined } from '@ant-design/icons';
+import ProgressTabs from './index';
+
+const ProgressTabsDemo = () => {
+  const [value, setValue] = useState('setup');
+
+  const options = [
+    { label: 'Set Up', value: 'setup' },
+    { label: 'Project Scan', value: 'scan' },
+    { label: 'Review & Submission', value: 'review' },
+    { label: 'Submission Status', value: 'status' }
+  ];
+
+  const currentOption = options.find(option => option.value === value);
+  const currentIndex = options.findIndex(option => option.value === value);
+
+  const handleNext = () => {
+    const nextIndex = Math.min(options.length - 1, currentIndex + 1);
+    setValue(options[nextIndex].value);
+  };
+
+  const handlePrevious = () => {
+    const prevIndex = Math.max(0, currentIndex - 1);
+    setValue(options[prevIndex].value);
+  };
+
+  const handleValueChange = (newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
+      <h2>ProgressTabs Component Demo</h2>
+      <p>This component creates a horizontal progress bar with clickable segments, similar to the design you provided. It uses Ant Design&apos;s Segmented component as the base.</p>
+      
+      <div style={{ marginBottom: '20px' }}>
+        <ProgressTabs 
+          value={value} 
+          options={options}
+          onChange={handleValueChange}
+        />
+      </div>
+
+      <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+        <p><strong>Current Step:</strong> {currentOption?.label}</p>
+        <p><strong>Step Value:</strong> {value}</p>
+        <p><strong>Step Index:</strong> {currentIndex}</p>
+      </div>
+
+      <Space>
+        <Button 
+          onClick={handlePrevious}
+          disabled={value === 'setup'}
+        >
+          Previous
+        </Button>
+        <Button 
+          type="primary"
+          onClick={handleNext}
+          disabled={value === 'status'}
+        >
+          Next
+        </Button>
+      </Space>
+
+      <div style={{ marginTop: '30px' }}>
+        <h3>Usage Example:</h3>
+        <pre style={{ 
+          background: '#f5f5f5', 
+          padding: '15px', 
+          borderRadius: '4px',
+          overflow: 'auto'
+        }}>
+{`import { ProgressTabs } from 'datastake-daf/dist/components';
+import { CheckOutlined, ScanOutlined, FileTextOutlined, CheckCircleOutlined } from '@ant-design/icons';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('setup');
+  
+  const 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 }
+  ];
+
+  return (
+    <ProgressTabs 
+      value={value} 
+      options={options}
+      onChange={setValue}
+      width="100%" // Default is 100%, can be customized
+    />
+  );
+};`}
+        </pre>
+      </div>
+
+      <div style={{ marginTop: '20px' }}>
+        <h3>Advanced Examples:</h3>
+        
+        <div style={{ marginBottom: '20px' }}>
+          <h4>With Icons:</h4>
+          <ProgressTabs 
+            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 /> }
+            ]}
+          />
+        </div>
+        
+        <div style={{ marginBottom: '20px' }}>
+          <h4>With Disabled States:</h4>
+          <ProgressTabs 
+            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 }
+            ]}
+          />
+        </div>
+        
+        <div style={{ marginBottom: '20px' }}>
+          <h4>With Icons and Disabled States:</h4>
+          <ProgressTabs 
+            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 }
+            ]}
+          />
+        </div>
+        
+        <div style={{ marginBottom: '20px' }}>
+          <h4>Custom Width (400px):</h4>
+          <ProgressTabs 
+            value="scan" 
+            options={options}
+            width="400px"
+          />
+        </div>
+        
+        <div style={{ marginBottom: '20px' }}>
+          <h4>Small Width (300px):</h4>
+          <ProgressTabs 
+            value="review" 
+            options={options}
+            width="300px"
+          />
+        </div>
+      </div>
+
+      
+    </div>
+  );
+};
+
+export default ProgressTabsDemo;

package/src/@daf/core/components/ProgressTabs/index.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Segmented } from 'antd';
+import './_index.scss';
+
+const ProgressTabs = ({ 
+  value = 'setup', 
+  options = [
+    { label: 'Set Up', value: 'setup' },
+    { label: 'Project Scan', value: 'scan' },
+    { label: 'Review & Submission', value: 'review' },
+    { label: 'Submission Status', value: 'status' }
+  ],
+  onChange = () => {},
+  className = '',
+  width = '100%',
+  ...rest 
+}) => {
+  // Transform options to include icons and handle disabled state
+  const transformedOptions = options.map(option => ({
+    ...option,
+    label: (
+      <div className="progress-tabs__option-content">
+      
+        <span className="progress-tabs__label">
+          {option.label}
+        </span> 
+         {option.icon && (
+          <span className="progress-tabs__icon">
+            {option.icon}
+          </span>
+        )}
+      </div>
+    ),
+    disabled: option.isDisabled || false,
+  }));
+
+  return (
+    <div 
+      className={`progress-tabs ${className}`}
+      style={{ width }}
+    >
+      <Segmented
+        value={value}
+        options={transformedOptions}
+        onChange={onChange}
+        className="progress-tabs__segmented"
+        {...rest}
+      />
+    </div>
+  );
+};
+
+ProgressTabs.propTypes = {
+  value: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      isDisabled: PropTypes.bool,
+      icon: PropTypes.node,
+    })
+  ),
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default ProgressTabs;

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

@@ -10,4 +10,5 @@
 @import './DynamicForm/index';
 @import "./Badge/index.scss";
 @import "./Screens/index.scss";
+@import "./ProgressTabs/index";
 @import "./PdfForm/style.scss";

package/src/index.js

@@ -69,7 +69,6 @@ export { default as DafDashboardDetails } from "./@daf/core/components/Dashboard
 export { default as KeyIndicatorsDetails } from "./@daf/core/components/Dashboard/Widget/Details/KeyIndicatorsDetails.jsx";
 export { default as DetailsSection } from "./@daf/core/components/Dashboard/Widget/DetailsSection/index.jsx";
 export { default as ComponentWithFocus } from "./@daf/core/components/Dashboard/ComponentWithFocus/index.jsx";
-export { default as WidgetCatalogue } from "./@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx";
 
 // Forms
 export { default as ViewForm } from "./@daf/core/components/ViewForm/content.jsx";
@@ -85,6 +84,7 @@ export { AjaxSelectMain as AjaxSelect } from "./@daf/core/components/EditForm/co
 export { default as ProgressBar } from "./@daf/core/components/ProgressBar/index.jsx";
 export { default as MultiBarProgress } from "./@daf/core/components/ProgressBar/MultiBarProgress/index.jsx";
 export { default as ProgressBarSideIcon } from "./@daf/core/components/ProgressBar/components/SideIcon/index.jsx";
+export { default as ProgressTabs } from "./@daf/core/components/ProgressTabs/index.jsx";
 
 // Data Store
 export { default as DataStore } from "./@daf/core/components/DataStore/index.js";

package/src/@daf/core/components/Dashboard/Widget/WidgetCatalogue/WidgetCatalogue.stories.jsx

@@ -1,109 +0,0 @@
-import React from "react";
-import WidgetCatalogue from "./index.jsx";
-
-// Sample projects data matching the image exactly
-const sampleProjects = [
-  {
-    title: "ABC Mangrove Senegal",
-    image:
-      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop",
-    country: "Senegal",
-    countryFlag: "https://flagcdn.com/w40/sn.png",
-    sectoralScope: "AFOLU",
-    methodology: "VM0033",
-    imgAlt: "Mangrove landscape with calm water reflecting green trees",
-  },
-  {
-    title: "IFM Jujuy",
-    image:
-      "https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400&h=200&fit=crop",
-    country: "Argentina",
-    countryFlag: "https://flagcdn.com/w40/ar.png",
-    sectoralScope: "AFOLU",
-    methodology: "VM0033",
-    imgAlt: "White-faced whistling ducks in shallow water with green grass",
-  },
-  {
-    title: "Sur del Meta",
-    image:
-      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop",
-    country: "Colombia",
-    countryFlag: "https://flagcdn.com/w40/co.png",
-    sectoralScope: "AFOLU",
-    methodology: "VM0033",
-    imgAlt: "Aerial view of braided river channels through green landscape",
-  },
-];
-
-export default {
-  title: "Dashboard/Widgets/WidgetCatalogue",
-  component: WidgetCatalogue,
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "A widget component that displays multiple project cards in a responsive grid layout, mapping over an array of project data. Each card shows project details including image, title, country, sectoral scope, methodology, and SDGs.",
-      },
-    },
-  },
-  argTypes: {
-    title: {
-      control: "text",
-      description: "Widget title displayed at the top",
-    },
-    projects: {
-      control: "object",
-      description: "Array of project objects to display",
-    },
-    loading: {
-      control: "boolean",
-      description: "Loading state - shows spinner when true",
-    },
-    className: {
-      control: "text",
-      description: "Additional CSS classes for styling",
-    },
-  },
-};
-
-// Template for the story
-const Template = (args) => (
-  <div
-    style={{ padding: "20px", backgroundColor: "#f5f5f5", minHeight: "100vh" }}
-  >
-    <WidgetCatalogue {...args} />
-  </div>
-);
-
-// Populated state - matches the image exactly
-export const Populated = Template.bind({});
-Populated.args = {
-  title: "Project Catalogue",
-  projects: sampleProjects,
-  loading: false,
-};
-Populated.parameters = {
-  docs: {
-    description: {
-      story:
-        "Widget with multiple project cards, matching the design from the reference image. Shows three projects with images, country flags, and SDG icons.",
-    },
-  },
-};
-
-// Single project
-export const SingleProject = Template.bind({});
-SingleProject.args = {
-  title: "Featured Project",
-  projects: [sampleProjects[0]],
-  loading: false,
-};
-SingleProject.parameters = {
-  docs: {
-    description: {
-      story:
-        "Widget with a single project card - shows how the grid adapts to fewer items.",
-    },
-  },
-};

package/src/@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx

@@ -1,197 +0,0 @@
-import React from "react";
-import { Image, Empty, Spin } from "antd";
-import { ExpandOutlined } from "@ant-design/icons";
-import { Card } from "antd";
-import Widget from "../index.jsx";
-
-// SDG configuration with proper colors and icons
-const SDG_CONFIG = {
-  1: {
-    name: "No Poverty",
-    color: "#E5243B",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg",
-  },
-  2: {
-    name: "Zero Hunger",
-    color: "#DDA63A",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg",
-  },
-  3: {
-    name: "Good Health and Well-being",
-    color: "#4C9F38",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg",
-  },
-  4: {
-    name: "Quality Education",
-    color: "#C5192D",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg",
-  },
-  6: {
-    name: "Clean Water and Sanitation",
-    color: "#26BDE2",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-06.jpg",
-  },
-  8: {
-    name: "Decent Work and Economic Growth",
-    color: "#A21942",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-08.jpg",
-  },
-  13: {
-    name: "Climate Action",
-    color: "#48773E",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-13.jpg",
-  },
-  15: {
-    name: "Life on Land",
-    color: "#3EB049",
-    icon: "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-15.jpg",
-  },
-};
-
-// Default SDGs to show (matching the image)
-const DEFAULT_SDGS = [1, 2, 3, 4, 6, 8, 13, 15];
-
-// Individual Project Card Component
-const ProjectCard = ({
-  title,
-  image,
-  imgAlt,
-  country,
-  countryFlag,
-  sectoralScope,
-  methodology,
-  sdgs = [],
-}) => {
-  return (
-    <Card
-      style={{
-        minWidth: 280,
-        width: "100%",
-        borderRadius: "12px",
-        overflow: "hidden",
-        border: "1px solid #e5e7eb",
-        boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-      }}
-      cover={
-        <div className="relative w-full h-40 overflow-hidden">
-          {image ? (
-            <img
-              alt={imgAlt || `${title} image`}
-              src={image}
-              style={{ width: "100%", height: "100%", objectFit: "cover" }}
-            />
-          ) : (
-            <div className="w-full h-full flex items-center justify-center bg-gray-100">
-              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            </div>
-          )}
-        </div>
-      }
-      bodyStyle={{ padding: "16px" }}
-    >
-      {/* Title */}
-      {title && (
-        <h3 className="text-md font-semibold text-gray-900 mb-3">{title}</h3>
-      )}
-
-      {/* Country */}
-      {country && (
-        <div className="flex items-center justify-between py-2 border-b border-gray-200">
-          <span className="text-sm text-gray-600">Country</span>
-          <div className="flex items-center gap-1">
-            {countryFlag && (
-              <img
-                src={countryFlag}
-                alt={`${country} flag`}
-                style={{ width: "16px", height: "12px" }}
-              />
-            )}
-            <span className="text-sm font-medium text-gray-900">{country}</span>
-          </div>
-        </div>
-      )}
-
-      {/* Sectoral Scope */}
-      {sectoralScope && (
-        <div className="flex items-center justify-between py-2 border-b border-gray-200">
-          <span className="text-sm text-gray-600">Sectoral Scope</span>
-          <span className="text-sm font-medium text-gray-900">
-            {sectoralScope}
-          </span>
-        </div>
-      )}
-
-      {/* Methodology */}
-      {methodology && (
-        <div className="flex items-center justify-between py-2 border-b border-gray-200">
-          <span className="text-sm text-gray-600">Methodology</span>
-          <span className="text-sm font-medium text-gray-900">
-            {methodology}
-          </span>
-        </div>
-      )}
-
-      {/* SDGs */}
-      <div className="pt-2">
-        <span className="text-sm text-gray-600">SDGs</span>
-        <div className="flex flex-wrap gap-1 mt-2">
-          {(sdgs.length > 0 ? sdgs : DEFAULT_SDGS).map((sdg, index) => {
-            const sdgConfig = typeof sdg === "number" ? SDG_CONFIG[sdg] : sdg;
-            return (
-              <img
-                key={index}
-                src={sdgConfig?.icon}
-                alt={sdgConfig?.name}
-                style={{ width: "22px", height: "22px", objectFit: "cover" }}
-              />
-            );
-          })}
-        </div>
-      </div>
-    </Card>
-  );
-};
-
-// Main Widget Catalogue Component
-export default function WidgetCatalogue({
-  title = "Project Catalogue",
-  projects = [],
-  loading = false,
-  className = "",
-}) {
-  if (loading) {
-    return (
-      <Widget title={title} className="with-border-header">
-        <div className="flex justify-center items-center h-64">
-          <Spin size="large" />
-        </div>
-      </Widget>
-    );
-  }
-
-  return (
-    <>
-      <Widget title={title} className="with-border-header">
-        <div
-          style={{
-            display: "flex",
-            gap: "16px",
-            justifyContent: "space-between",
-          }}
-        >
-          {projects.slice(0, 3).map((project, idx) => (
-            <div
-              key={idx}
-              style={{
-                flex: "1 1 0", // make each card take equal width
-                maxWidth: "calc(33.333% - 16px)",
-              }}
-            >
-              <ProjectCard project={project} />
-            </div>
-          ))}
-        </div>
-      </Widget>
-    </>
-  );
-}