datastake-daf 0.6.748 → 0.6.749

package/src/@daf/core/components/Screens/Settings/index.js

@@ -0,0 +1,164 @@
+// Base Settings Screen Component
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import SettingsView from "./View";
+import SettingsEdit from "./Edit";
+import { getDefaultActiveForm, ACTIVE_FORM_KEY } from "./config";
+
+/**
+ * Base Settings Component
+ * Provides common settings screen functionality that applications can use or extend
+ * 
+ * @param {Object} props
+ * @param {Object} props.sections - Settings sections configuration
+ * @param {Object} props.data - Current settings data
+ * @param {Function} props.onSave - Callback when saving settings
+ * @param {Function} props.onChange - Callback when data changes
+ * @param {Object} props.permissions - User permissions for settings
+ * @param {string} props.mode - 'view' or 'edit' mode
+ * @param {Function} props.onModeChange - Callback when mode changes (view <-> edit)
+ * @param {Object} props.customComponents - Custom input components to override defaults
+ * @param {string} props.defaultSection - Default active section key
+ * @param {Object} props.query - URL query parameters (for active section)
+ * @param {Function} props.t - Translation function (e.g., from react-i18next)
+ * @param {Function} props.renderHeader - Optional custom header render function
+ * @param {Function} props.renderMenu - Optional custom menu render function
+ */
+export default function Settings({
+  sections = {},
+  data = {},
+  onSave,
+  onChange,
+  permissions = {},
+  mode = 'view',
+  onModeChange,
+  customComponents = {},
+  defaultSection = 'user',
+  query = null,
+  t = (key) => key,
+  renderHeader,
+  renderMenu,
+}) {
+  // Get active form from URL query or default
+  const activeFormKey = useMemo(() => 
+    getDefaultActiveForm(query, sections, defaultSection), 
+    [query, sections, defaultSection]
+  );
+
+  const activeForm = useMemo(() => 
+    sections[activeFormKey], 
+    [sections, activeFormKey]
+  );
+
+  const [isChanged, setIsChanged] = useState(false);
+  const [inputLoading, setInputLoading] = useState(false);
+
+  // Handle section change
+  const changeSection = useCallback((key) => {
+    if (onModeChange && typeof onModeChange === 'function') {
+      // If parent provides navigation, use it
+      onModeChange(mode, key);
+    }
+  }, [mode, onModeChange]);
+
+  // Navigate to view mode
+  const goToView = useCallback(() => {
+    if (onModeChange) {
+      onModeChange('view', activeFormKey);
+    }
+  }, [activeFormKey, onModeChange]);
+
+  // Navigate to edit mode
+  const goToEdit = useCallback(() => {
+    if (onModeChange) {
+      onModeChange('edit', activeFormKey);
+    }
+  }, [activeFormKey, onModeChange]);
+
+  // Handle save
+  const handleSave = useCallback(async () => {
+    if (onSave) {
+      try {
+        await onSave(data);
+        setIsChanged(false);
+        goToView();
+      } catch (error) {
+        console.error('Error saving settings:', error);
+      }
+    }
+  }, [data, onSave, goToView]);
+
+  // Handle cancel
+  const handleCancel = useCallback(() => {
+    setIsChanged(false);
+    goToView();
+  }, [goToView]);
+
+  // Handle data change
+  const handleChange = useCallback((newData) => {
+    setIsChanged(true);
+    if (onChange) {
+      onChange(newData);
+    }
+  }, [onChange]);
+
+  // Render based on mode
+  if (mode === 'edit') {
+    return (
+      <SettingsEdit
+        sections={sections}
+        activeForm={activeForm}
+        activeFormKey={activeFormKey}
+        data={data}
+        isChanged={isChanged}
+        onChange={handleChange}
+        onSave={handleSave}
+        onCancel={handleCancel}
+        setInputLoading={setInputLoading}
+        inputLoading={inputLoading}
+        permissions={permissions}
+        changeSection={changeSection}
+        goToView={goToView}
+        customComponents={customComponents}
+        renderHeader={renderHeader}
+        renderMenu={renderMenu}
+        t={t}
+      >
+        {/* Applications should wrap this component and provide their own header/menu/children */}
+      </SettingsEdit>
+    );
+  }
+
+  return (
+    <SettingsView
+      sections={sections}
+      activeForm={activeForm}
+      activeFormKey={activeFormKey}
+      data={data}
+      permissions={permissions}
+      goToEdit={goToEdit}
+      goToView={goToView}
+      changeSection={changeSection}
+      customComponents={customComponents}
+      t={t}
+    >
+      {/* Applications should wrap this component and provide their own header/menu/children */}
+    </SettingsView>
+  );
+}
+
+// Named exports for direct use
+export { default as SettingsView } from "./View";
+export { default as SettingsEdit } from "./Edit";
+
+// Optional exports for Header and Menu (require react-i18next and react-router-dom in the consuming app)
+export { default as SettingsHeader } from "./components/Header";
+export { default as SettingsMenu } from "./components/Menu";
+
+// Configuration exports
+export {
+  INPUT_TYPES,
+  ACTIVE_FORM_KEY,
+  PLACEHOLDER,
+  getDefaultActiveForm,
+} from "./config";
+

package/src/@daf/pages/Documents/columns.js

@@ -5,7 +5,7 @@ import { renderDateFormatted } from '../../../helpers/Forms.js';
 import CustomIcon from '../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../helpers/sourceAvatarConfig.js';
-
+import MoreMenu from '../../core/components/Table/MoreMenu/index.jsx';
 export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink, theme, subject, applications }) => [
   {
     dataIndex: 'datastakeId',
@@ -89,13 +89,30 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
       if (all.empty) {
         return <div className="daf-default-cell" />;
       }
-
-      const link = `/app/view/${subject}/${all.datastakeId}`;
-
-      return <div style={{ display: "flex", justifyContent: "center" }}>
-        <a href={getRedirectLink(link)}>
-          <CustomIcon name="Link" size={15} color={theme.baseGray70} />
-        </a>
+      const onClick = () => {
+        const link = `/app/view/${subject}/${all.datastakeId}`;
+        if (activeTab === "shared") {
+          link += `?sourceId=${all?.authorId?.id}`;
+        }
+        goTo(getRedirectLink(link));
+      };
+      const moreMenuItems = [
+        {
+          label: t("Details"),
+          value: "details",
+          onClick: onClick,
+        },
+        {
+          label: t("Remove"),
+          value: "remove",
+          onClick: () => {
+            console.log("remove");
+          },
+          disabled: true,
+        },
+      ];
+      return <div >
+           <MoreMenu items={moreMenuItems} />
       </div>;
     }
   }

package/src/@daf/pages/Documents/config.js

@@ -5,14 +5,11 @@ export const checkboxConfig = {
 
 export const getFiltersConfig = ({t}) => {
     return {
-        country: {
-			type: 'select',
-			placeholder: t('Country'),
-			style: { flex: 1 },
-			labelStyle: { flex: 1 },
-			getLabel: (option) => option.label,
-			getValue: (option) => option.value,
-		},
+   timeframe: {
+		type: "timeframe",
+		label: "Timeframe",
+		style: { flex: 1 },
+	},
     }
 }
 
@@ -22,9 +19,9 @@ export const filtersConfig = {
 };
 
 export const getFilterOptions = (options, t) => {
-	const { countries } = options || {};
+	const { timeframe = []	 } = options || {};
 	const _default  = {
-		country: countries,
+		timeframe: timeframe,
 	}
 
 	return _default;

package/src/@daf/pages/Events/Activities/columns.js

@@ -5,7 +5,7 @@ import { renderDateFormatted } from '../../../../helpers/Forms.js';
 import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
-
+import MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {
     return linkingObject?.[value]?.name;
@@ -209,14 +209,24 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         if (all.empty) {
           return <div className="daf-default-cell" />;
         }
-
-        const link = `/app/view/${subject}/${all.datastakeId}`;
-
-        return <div style={{ display: "flex", justifyContent: "center" }}>
-						<a href={getRedirectLink(link)}>
-							<CustomIcon name="Link" size={15} color={theme.baseGray70} />
-						</a>
-			</div>;
+        const onClick = () => {
+          const link = `/app/view/${subject}/${all.datastakeId}`;
+          if (activeTab === "shared") {
+            link += `?sourceId=${all?.authorId?.id}`;
+          }
+          goTo(getRedirectLink(link));
+        };
+        const moreMenuItems = [
+          {
+            label: t("Details"),
+            value: "details",
+            onClick: onClick,
+          },
+     
+        ];
+        return <div >
+             <MoreMenu items={moreMenuItems} />
+        </div>;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Events/Activities/config.js

@@ -5,15 +5,22 @@ export const checkboxConfig = {
 
 export const getFiltersConfig = ({t}) => {
     return {
-		country: {
-		  type: 'select',
-		  label: 'Country',
-		  placeholder: (t) => `${t('Filter by')} ${t('Country').toLowerCase()}`,
-		  style: { flex: 1 },
-		  labelStyle: { flex: 1 },
-		  getLabel: (option) => option.label,
-		  getValue: (option) => option.value,
+
+		
+timeframe: {
+	type: "timeframe",
+	label: "Timeframe",
+	style: { flex: 1 },
 		},
+		country: {
+			type: 'select',
+			label: 'Country',
+			placeholder: (t) => `${t('Filter by')} ${t('Country').toLowerCase()}`,
+			style: { flex: 1 },
+			labelStyle: { flex: 1 },
+			getLabel: (option) => option.label,
+			getValue: (option) => option.value,
+		  },
 		administrativeLevel1: {
 		  type: 'ajaxSelect',
 		  label: ({ t = (s) => s, options = {}, filters = {}, language = 'en' }) => {
@@ -77,10 +84,10 @@ export const getFiltersConfig = ({t}) => {
 		  style: { flex: 1 },
 		  labelStyle: { flex: 1 },
 		},
-		activity: {
+		category: {
 		  type: 'select',
-		  label: 'Activity',
-		  placeholder: (t) => `${t('Filter by')} ${t('Activity').toLowerCase()}`,
+		  label: 'Category',
+		  placeholder: (t) => `${t('Filter by')} ${t('Category').toLowerCase()}`,
 		  style: { flex: 1 },
 		  labelStyle: { flex: 1 },
 		  getLabel: (option) => option.label,
@@ -129,11 +136,13 @@ export const filtersConfig = {
 
 export const getFilterOptions = (options, t) => {
 	const {
+		timeframe = [],
+
 		statusOptions = [],
 		categoryOptions = [],
 		countries = [],
 		subCategory = [],
-		activityAtSiteOptions = [],
+		category = [],
 		stakeholderCategoryOptions,
 		stakeholderSubCategoriesOptions,
 		administrativeLevel1,
@@ -143,6 +152,7 @@ export const getFilterOptions = (options, t) => {
 	  } = options || {};
 
 	const _default  = {
+		timeframe: timeframe,
 		status: [
 			{
 				value: "submitted",
@@ -156,7 +166,7 @@ export const getFilterOptions = (options, t) => {
 		category: stakeholderCategoryOptions || categoryOptions,
 		country: countries,
 		subCategory: subCategoriesOptions,
-		activity: activityAtSiteOptions,
+		category: category,
 		administrativeLevel1,
 		administrativeLevel2,
 		positionInTheMineralSupplyChain: positionInMineralSupplyChainOptions,

package/src/@daf/pages/Events/Incidents/columns.js

@@ -5,7 +5,7 @@ import { renderDateFormatted } from '../../../../helpers/Forms.js';
 import CustomIcon from '../../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
-
+import MoreMenu from '../../../core/components/Table/MoreMenu/index.jsx';
 const getLinkValue = (value, linkingObject) => {
   if(linkingObject && linkingObject?.[value]) {
     return linkingObject?.[value]?.name;
@@ -208,14 +208,24 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         if (all.empty) {
           return <div className="daf-default-cell" />;
         }
-
-        const link = `/app/view/${subject}/${all.datastakeId}`;
-
-        return <div style={{ display: "flex", justifyContent: "center" }}>
-						<a href={getRedirectLink(link)}>
-							<CustomIcon name="Link" size={15} color={theme.baseGray70} />
-						</a>
-			</div>;
+        const onClick = () => {
+          const link = `/app/view/${subject}/${all.datastakeId}`;
+          if (activeTab === "shared") {
+            link += `?sourceId=${all?.authorId?.id}`;
+          }
+          goTo(getRedirectLink(link));
+        };
+        const moreMenuItems = [
+          {
+            label: t("Details"),
+            value: "details",
+            onClick: onClick,
+          },
+     
+        ];
+        return <div >
+             <MoreMenu items={moreMenuItems} />
+        </div>;
       }
     }
 ].filter((column) => column.show !== false);

package/src/@daf/pages/Events/Incidents/config.js

@@ -5,15 +5,22 @@ export const checkboxConfig = {
 
 export const getFiltersConfig = ({t}) => {
     return {
-		country: {
-		  type: 'select',
-		  label: 'Country',
-		  placeholder: (t) => `${t('Filter by')} ${t('Country').toLowerCase()}`,
-		  style: { flex: 1 },
-		  labelStyle: { flex: 1 },
-		  getLabel: (option) => option.label,
-		  getValue: (option) => option.value,
+
+		
+timeframe: {
+	type: "timeframe",
+	label: "Timeframe",
+	style: { flex: 1 },
 		},
+		country: {
+			type: 'select',
+			label: 'Country',
+			placeholder: (t) => `${t('Filter by')} ${t('Country').toLowerCase()}`,
+			style: { flex: 1 },
+			labelStyle: { flex: 1 },
+			getLabel: (option) => option.label,
+			getValue: (option) => option.value,
+		  },
 		administrativeLevel1: {
 		  type: 'ajaxSelect',
 		  label: ({ t = (s) => s, options = {}, filters = {}, language = 'en' }) => {
@@ -77,10 +84,10 @@ export const getFiltersConfig = ({t}) => {
 		  style: { flex: 1 },
 		  labelStyle: { flex: 1 },
 		},
-		activity: {
+		category: {
 		  type: 'select',
-		  label: 'Activity',
-		  placeholder: (t) => `${t('Filter by')} ${t('Activity').toLowerCase()}`,
+		  label: 'Category',
+		  placeholder: (t) => `${t('Filter by')} ${t('Category').toLowerCase()}`,
 		  style: { flex: 1 },
 		  labelStyle: { flex: 1 },
 		  getLabel: (option) => option.label,
@@ -129,11 +136,13 @@ export const filtersConfig = {
 
 export const getFilterOptions = (options, t) => {
 	const {
+		timeframe = [],
+
 		statusOptions = [],
 		categoryOptions = [],
 		countries = [],
 		subCategory = [],
-		activityAtSiteOptions = [],
+		category = [],
 		stakeholderCategoryOptions,
 		stakeholderSubCategoriesOptions,
 		administrativeLevel1,
@@ -143,6 +152,7 @@ export const getFilterOptions = (options, t) => {
 	  } = options || {};
 
 	const _default  = {
+		timeframe: timeframe,
 		status: [
 			{
 				value: "submitted",
@@ -156,7 +166,7 @@ export const getFilterOptions = (options, t) => {
 		category: stakeholderCategoryOptions || categoryOptions,
 		country: countries,
 		subCategory: subCategoriesOptions,
-		activity: activityAtSiteOptions,
+		category: category,
 		administrativeLevel1,
 		administrativeLevel2,
 		positionInTheMineralSupplyChain: positionInMineralSupplyChainOptions,

package/src/@daf/pages/Events/columns.js

@@ -7,7 +7,7 @@ import CustomIcon from '../../core/components/Icon/CustomIcon.jsx';
 import AvatarGroup from '../../core/components/AvatarGroup/index.jsx';
 import sourceAvatarConfig from '../../../helpers/sourceAvatarConfig.js';
 import MoreTags from '../../core/components/Table/MoreTags/index.jsx';
-
+import MoreMenu from '../../core/components/Table/MoreMenu/index.jsx';
 const getLinkValue = (value, linkingObject) => {
   if (linkingObject && linkingObject?.[value]) {
     return linkingObject?.[value]?.name;
@@ -205,6 +205,21 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
     },
     ellipsis: true,
   },
+  {
+    title: t("Last Update"),
+    dataIndex: "updatedAt",
+    key: "updatedAt",
+    width: 125,
+    render: (date, all) => {
+      if (all.empty) {
+        return <div className="daf-default-cell" />;
+      }
+
+      const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+      return <Tooltip title={_date}>{_date}</Tooltip>;
+    },
+    ellipsis: true,
+  },
   {
     id: 'actions',
     title: "",
@@ -213,13 +228,23 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
       if (all.empty) {
         return <div className="daf-default-cell" />;
       }
-
-      const link = `/app/view/${subject}/${all.datastakeId}`;
-
-      return <div style={{ display: "flex", justifyContent: "center" }}>
-        <a href={getRedirectLink(link)}>
-          <CustomIcon name="Link" size={15} color={theme.baseGray70} />
-        </a>
+      const onClick = () => {
+        const link = `/app/view/${subject}/${all.datastakeId}`;
+        if (activeTab === "shared") {
+          link += `?sourceId=${all?.authorId?.id}`;
+        }
+        goTo(getRedirectLink(link));
+      };
+      const moreMenuItems = [
+        {
+          label: t("Details"),
+          value: "details",
+          onClick: onClick,
+        },
+    
+      ];
+      return <div >
+           <MoreMenu items={moreMenuItems} />
       </div>;
     }
   }

package/src/@daf/pages/Events/config.js

@@ -145,15 +145,10 @@ export const filtersConfig = {
 export const getFilterOptions = (options, t) => {
 	const {
         timeframe = [],
-		statusOptions = [],
+		status = [],
 		categoryOptions = [],
 		countries = [],
-		subCategory = [],
-		subCategoriesOptions,
-		stakeholderCategoryOptions,
-		stakeholderSubCategoriesOptions,
-		administrativeLevel1,
-		administrativeLevel2,
+
 		category=[],
 	  } = options || {};
 	console.log({options})
@@ -161,22 +156,19 @@ export const getFilterOptions = (options, t) => {
 	const _default  = {
        timeframe: timeframe,
 	   country: countries,
+	   category: category,
 
-		category: stakeholderCategoryOptions || categoryOptions,
-		administrativeLevel1,
-		administrativeLevel2,
-		// subCategory: subCategoriesOptions,
-		category: category,
-		status: [
-			{
-				value: "submitted",
-				label: "Submitted",
-			},
-			{
-				value: "private",
-				label: "Private",
-			},
-		],
+	   status: [
+		{
+			value: "submitted",
+			label: "Submitted",
+		},
+		{
+			value: "private",
+			label: "Private",
+		},
+	],
+		
 	}
 
 	return _default;