datastake-daf 0.6.791 → 0.6.793

package/package.json

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

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

@@ -128,13 +128,13 @@ function AuthForm ({
       case "input":
       case "email":
       case "number":
-        inputNode = <Input type={field.type} placeholder={field.placeholder} {...field.props} />;
+        inputNode = <Input type={field.type} placeholder={field.placeholder} disabled={field.disabled} {...field.props} />;
         break;
       case "password":
-        inputNode = <Input.Password placeholder={field.placeholder} {...field.props} />;
+        inputNode = <Input.Password placeholder={field.placeholder} disabled={field.disabled} {...field.props} />;
         break;
       case "textarea":
-        inputNode = <Input.TextArea placeholder={field.placeholder} {...field.props} />;
+        inputNode = <Input.TextArea placeholder={field.placeholder} disabled={field.disabled} {...field.props} />;
         break;
       case "select": {
         const { onChange: fieldOnChange, value: fieldValue, ...restSelectProps } = field.props || {};
@@ -142,6 +142,7 @@ function AuthForm ({
         inputNode = (
           <StyledSelect 
             placeholder={field.placeholder}
+            disabled={field.disabled}
             {...restSelectProps}
           >
             {field.options?.map((opt) => (
@@ -157,7 +158,7 @@ function AuthForm ({
         inputNode = field.component;
         break;
       default:
-        inputNode = <Input placeholder={field.placeholder} {...field.props} />;
+        inputNode = <Input placeholder={field.placeholder} disabled={field.disabled} {...field.props} />;
     }
 
     const formItemProps = {

package/src/@daf/core/components/ProgressBar/ProgressBarWithIcon/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import ProgressBar from '../index.jsx'
+import ProgressBarSideIcon from '../components/SideIcon/index.jsx'
+
+function ProgressBarWithIcon({
+    published,
+    data,
+    t
+}) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+        <ProgressBar 
+            style={{ width: "100%" }}
+            tooltipTitle={published && t("Submitted")} 
+            percentage={parseInt(data?.completion || 0)} 
+            isSubmitted={published}
+        />
+        {published ? <ProgressBarSideIcon size={16} iconSize={10} /> : <span>{parseInt(data?.completion || 0)}%</span>}
+    </div>
+  )
+}
+
+export default ProgressBarWithIcon

package/src/@daf/core/components/Table/NavigationAction/index.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import CustomIcon from '../../Icon/CustomIcon.jsx';
 
-const NavigationAction = ({onClick, theme}) => {
+const NavigationAction = ({onClick, theme, disabled = false}) => {
   return ( 
         <div style={{ display: "flex", justifyContent: "center" }}>
             <button 
                 onClick={onClick}
+                disabled={disabled}
                 style={{ 
-                    cursor: 'pointer', 
                     border: 'none', 
                     background: 'transparent',
                     padding: 0,
                     display: 'flex',
-                    alignItems: 'center'
+                    alignItems: 'center',
+                    opacity: disabled ? 0.5 : 1,
+                    cursor: disabled ? 'not-allowed' : 'pointer',
                 }}
             >
                 <CustomIcon name="Link" size={15} color={theme.baseGray70} />

package/src/@daf/pages/Dashboards/SelfAssesment/components/AssociatedInformation/columns.js

@@ -0,0 +1,248 @@
+import React from "react";
+import { Tooltip } from "antd";
+import { renderDateFormatted } from '../../../../../../helpers/Forms.js';
+import { findOptions, getLinkValue } from '../../../../../../helpers/StringHelper.js';
+import CustomIcon from '../../../../../core/components/Icon/CustomIcon.jsx';
+import NavigationAction from '../../../../../core/components/Table/NavigationAction/index.jsx';
+
+
+export const getColumns = ({ t, activeTab, options, user, goTo, getRedirectLink, theme }) =>
+	[
+		{
+			dataIndex: "datastakeId",
+			title: t("ID"),
+			ellipsis: true,
+			show: true,
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				return (
+					<Tooltip title={v}>{v || "-"}</Tooltip>
+				);
+			},
+		},
+		{
+			dataIndex: "name",
+			title: activeTab === "documents" || activeTab === "events" ? t("Title") : t("Name"),
+			ellipsis: true,
+			show: true,
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				return (
+					<Tooltip title={v}>{v || "-"}</Tooltip>
+				);
+			},
+		},
+        {
+			dataIndex: "keyStakeholders",
+			title: t("Key Stakeholders"),
+			ellipsis: true,
+			show: activeTab === "events",
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}			
+
+				return (
+					<Tooltip title={v}>{v || "-"}</Tooltip>
+				);
+			},
+		},
+		{
+			dataIndex: "category",
+			title: t("Category"),
+			ellipsis: true,
+			show: activeTab === "stakeholders" || activeTab === "locations",
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+				const label = findOptions(v, options?.categoriesOptions) || "-";				
+
+				return (
+					<Tooltip title={label}>{label || "-"}</Tooltip>
+				);
+			},
+		},
+		{
+			dataIndex: "subCategory",
+			title: t("Legal Form"),
+			ellipsis: true,
+			show: activeTab === "stakeholders",
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const label = findOptions(v, options?.subCategoriesOptionsSbgi) || "-";	
+
+				return (
+					<Tooltip title={label}>{label || "-"}</Tooltip>
+				);
+			},
+		},
+		{
+			dataIndex: "country",
+			title: t("Country"),
+			ellipsis: true,
+			show: activeTab === "stakeholders" || activeTab === "locations",
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const label = findOptions(v, options?.countries) || "-";
+
+				return (
+					<Tooltip title={label}>{label || "-"}</Tooltip>
+				);
+			},
+		},
+        {
+            dataIndex: 'region',
+            title: findOptions(user?.company?.country, options?.administrativeLevel1)?.length > 2 ? findOptions(user?.company?.country, options?.administrativeLevel1) : t("Province"),
+            ellipsis: true,
+            show: activeTab === "locations",
+            render: (v, all) => {
+              if (all.empty) {
+                return <div className="daf-default-cell" />
+              }
+    
+              const region = getLinkValue(all?.administrativeLevel1, all?.linking?.SCL);
+    
+              return region ? <Tooltip title={region}>{region}</Tooltip> : '-';
+            },
+        },   
+        {
+            dataIndex: 'territory',
+            title: findOptions(user?.company?.country, options?.administrativeLevel2)?.length > 2 ? findOptions(user?.company?.country, options?.administrativeLevel2) : t("Territory"),
+            ellipsis: true,
+            show: activeTab === "locations",
+            render: (v, all) => {
+              if (all.empty) {
+                return <div className="daf-default-cell" />
+              }
+    
+              const district = getLinkValue(all?.administrativeLevel2, all?.linking?.SCL);
+    
+              return district ? <Tooltip title={district}>{district}</Tooltip> : '-';
+            },
+        },
+		{
+			dataIndex: "type",
+			show: activeTab === "documents",
+			title: t("Type"),
+			ellipsis: true,
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const label = findOptions(v, options?.documentationTypesOptions) || "-";
+
+				return (
+					<Tooltip title={label}>{label || "-"}</Tooltip>
+				);
+			},
+		},	
+        {
+			dataIndex: "date",
+			title: t("Date"),
+			ellipsis: true,
+			show: activeTab === "events",
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const language = user?.language === 'sp' ? 'es' : user?.language
+				const date = v ? renderDateFormatted(v, 'DD MMM YYYY', language || 'en') : '-';
+
+				return <Tooltip title={date}>{date}</Tooltip>;
+			},
+		},
+		{
+			dataIndex: "lastUpdated",
+			title: t("Last Update"),
+			ellipsis: true,
+			show: true,
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const language = user?.language === 'sp' ? 'es' : user?.language
+				const date = v ? renderDateFormatted(v, 'DD MMM YYYY', language || 'en') : '-';
+
+				return <Tooltip title={date}>{date}</Tooltip>;
+			},
+		},	
+        {
+			dataIndex: "scope",
+			title: t("Scope"),
+			ellipsis: true,
+			show: activeTab === "events",
+			render: (v, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}			
+
+				return (
+					<Tooltip title={v}>{v || "-"}</Tooltip>
+				);
+			},
+		},	
+		{
+			dataIndex: "content",
+			title: t("Content"),
+			ellipsis: true,
+			show: activeTab === "documents",
+			render: (_, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const content = {
+					name: all?.content?.[0]?.name,
+					link:all?.content?.[0]?.url
+				};
+
+				return (
+					<a
+						href={content.link}
+						target="_blank"
+						rel="noopener noreferrer"
+						style={{
+							// maxWidth: "100px",
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+						}}
+					>
+						{content.name}
+					</a>
+				);
+			},
+		},
+		{
+			title: t(""),
+			dataIndex: "actions",
+			key: "actions",
+			width: 60,
+			show: true,
+			render: (v, all) => {
+			  if (all.empty) {
+				return <div className="daf-default-cell" />;
+			  }
+			  const link = `/app/view/${activeTab}/${all.datastakeId}`;
+
+              return <NavigationAction onClick={() => goTo(getRedirectLink(link))} theme={theme} />
+	
+			},
+		},
+	].filter((column) => column.show);

package/src/@daf/pages/Dashboards/SelfAssesment/components/AssociatedInformation/index.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useMemo } from 'react'
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import Style from './style.js';
+import SearchFilters from '../../../../../core/components/Filters/searchFilters/index.jsx';
+import DafTable from '../../../../../core/components/Table/index.jsx';
+import TabsHeader from '../../../../../core/components/Header/TabsHeader/index.jsx';
+import { getColumns } from './columns.js';
+
+function AssociatedInformation({
+    t = () => {},
+    user = {},
+    goTo = () => {},
+    getRedirectLink = () => {},
+    options = {},
+}) {
+    const tabs = [
+		{ value: "stakeholders", label: t("Stakeholders") },
+        { value: "locations", label: t("Locations") },
+		{ value: "documents", label: t("Documents") },
+        { value: "events", label: t("Events") },
+	];
+	const [activeTab, setActiveTab] = useState("stakeholders");
+
+    const data = [];
+
+    const columns = useMemo(
+		() => getColumns({ t, isMonitoring: false, activeTab, options, getRedirectLink, user }),
+		[t, activeTab, options, getRedirectLink, user],
+	);
+
+    return (
+        <Widget
+            title={t("Associated Information")}
+            expandable
+            className="with-border-header no-px-body overflow-hidden"
+        >
+            <div style={{ display: "flex", flexDirection: "column", gap: "24px", marginLeft: "12px" }}>
+                <TabsHeader
+					tabs={tabs}
+					onChange={setActiveTab}
+					value={activeTab}
+					className="mt-0"
+				/>
+                <Style>
+                    <div>
+                        <SearchFilters t={t} />
+                    </div>
+                    <div>
+                    <div className="daf-table-wrapper">
+                            <DafTable
+                                columns={columns}
+                                data={data[activeTab]}
+                                className="pr-0"
+                                doEmptyRows
+                                rowKey={"datas"}
+                                hideOnLoading={false}
+                                scroll={{ x: false, y: 55 * 5 }}
+                                key={activeTab}
+                            />
+                        </div>
+                    </div>
+                </Style>
+            </div>
+        </Widget>
+    )
+}
+
+export default AssociatedInformation

package/src/@daf/pages/Dashboards/SelfAssesment/components/AssociatedInformation/style.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const Style = styled.div`
+  max-width: 98%;
+  margin-left: var(--size-lg);
+  overflow: hidden;
+  padding-right: 24px;
+
+  .daf-table {
+    padding: 0px;
+    margin-top: 0px;
+
+    .ant-tag {
+      text-align: center;
+    }
+  } 
+
+  .daf-select-filters .filters {
+    padding-top: 16px;
+    padding-left: 0; 
+    padding-right: 0; 
+  }
+
+  .daf-table {
+    padding-top: 16px;
+  }
+`;
+
+export default Style;

package/src/@daf/pages/Dashboards/SelfAssesment/components/OrganisationInformation/columns.js

@@ -0,0 +1,93 @@
+import { Tooltip } from "antd";
+import ProgressBarWithIcon from "../../../../../core/components/ProgressBar/ProgressBarWithIcon/index.jsx";
+import { renderDateFormatted } from "../../../../../../helpers/Forms.js";
+import MoreMenu from "../../../../../core/components/Table/MoreMenu/index.jsx";
+import NavigationAction from "../../../../../core/components/Table/NavigationAction/index.jsx";
+
+export const getColumns = ({
+    t,
+    data,
+    user,
+    goTo,
+    getRedirectLink,
+    theme,
+}) => [
+    {
+        dataIndex: 'name',
+        title: t('Name'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />
+            }
+            return <Tooltip title={v}>{v}</Tooltip>
+        }
+    },
+    {
+        dataIndex: 'completion',
+        title: t('Completion'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />
+            }
+            const published = false;
+
+            return <ProgressBarWithIcon published={published} data={v} t={t} />
+        }
+    },
+    {
+        dataIndex: 'lastUpdate',
+        title: t('Last Update'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />
+            }
+            const date = v ? renderDateFormatted(v, "DD MMM YYYY", user?.language || 'en') : "-";
+            return <Tooltip title={date}>{date}</Tooltip>
+        }
+    },
+    {
+        id: 'actions',
+        title: "",
+        width: 60,
+        render: (_, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />;
+          }
+
+          const moreMenuItems = [
+            {
+              label: t("Summary"),
+              value: "Summary",
+              onClick: () => {
+                let link = `/app/operator-summary/${all.datastakeId}`
+                goTo(getRedirectLink(link));
+              },
+              disabled: true,
+            },
+            {
+                label: t("Details"),
+                value: "details",
+                onClick: () => {
+                  let link = `/app/view/kyc/user`;
+                  goTo(getRedirectLink(link));
+                },
+                disabled: true,
+              },
+          ];
+
+          const managementSystemsOnClick = () => {
+            let link = `/app/view/management-systems/user`;
+            goTo(getRedirectLink(link));
+          }
+
+          return all?.key === 'kyc' ? <MoreMenu items={moreMenuItems} /> 
+          : <NavigationAction onClick={managementSystemsOnClick} theme={theme} disabled />
+        }
+      }
+]

package/src/@daf/pages/Dashboards/SelfAssesment/components/OrganisationInformation/index.jsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react'
+import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
+import DAFTable from '../../../../../core/components/Table/index.jsx';
+import { getColumns } from './columns.js';
+
+function OrganisationInformation({
+    t = () => {},
+    user = {},
+    goTo = () => {},
+    getRedirectLink = () => {},
+    theme = {},
+}) {
+    const organistionInfo = [
+        {key: 'kyc', label: t("My KYC")},
+        {key: 'management-systems', label: t("Management Systems")},
+    ]
+
+    const tableData = useMemo(() => {
+        return organistionInfo.map((item) => {
+            return {
+                key: item.key,
+                name: item.label,
+                completion: 0,
+                lastUpdate: "",
+            }
+        })
+    }, [organistionInfo])
+
+    const columns = useMemo(() => {
+        return getColumns({ t, data: tableData, user, goTo, getRedirectLink, theme })
+    }, [tableData, user, goTo, getRedirectLink, theme])
+
+    return (
+        <Widget 
+            title={t("Organisation Information")}
+            className="with-border-header daf-table-wrapper no-pagination no-px-body"
+        >
+            <DAFTable columns={columns} data={tableData} />
+        </Widget>
+    )
+}
+
+export default OrganisationInformation