datastake-daf 0.6.767 → 0.6.769

package/src/@daf/pages/Summary/Activities/Restoration/index.jsx

@@ -1,34 +1,20 @@
-import { useMemo, useCallback } from 'react';
-import { DashboardLayout, Header, ImageCarousel, KeyIndicators, MineSiteMap, Widget, PieChart, ActivityIndicators } from '../../../../../../src/index.js'
+import { useMemo } from 'react';
+import { DashboardLayout, Header, KeyIndicators, ActivityIndicators } from '../../../../../../src/index.js'
 import { getKeyIndicatorsRowConfig } from './config';
-import { getActivityImages, getGenderDistributionData, isGenderDistributionEmpty, calculateGenderPieData, getGenderTooltipChildren, getActivityIndicatorsConfig, getMapDataFromActivity } from './helper';
-import { renderTooltipJsx } from '../../../../../../src/utils';
-import { convertDMS } from '../../../../../../src/helpers/Map';
-import { useResizeContext } from '../../../../../../src/context';
-import CustomIcon from '../../../../../../src/@daf/core/components/Icon/CustomIcon.jsx';
+import { getActivityIndicatorsConfig } from './helper';
+import ActivityLocation from './components/ActivityLocation/index.jsx';
+import ActivityImagery from './components/ActivityImagery/index.jsx';
+import WorkersDistribution from './components/WorkersDistribution/index.jsx';
 
 const RestorationActivitySummary = ({ activityData, supportText, onDownload, downloadDisabled, actionButtons, breadcrumbs, goBackTo, loading, t = () => { } }) => {
-    const { isCollapsed, isNestedSidebarCollapsed } = useResizeContext();
     const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: activityData }), [t, activityData]);
-    const images = useMemo(() => getActivityImages(activityData), [activityData]);
-    const genderDistributionData = useMemo(() => getGenderDistributionData(activityData), [activityData]);
-    const isEmpty = useMemo(() => isGenderDistributionEmpty(genderDistributionData), [genderDistributionData]);
-    const pieData = useMemo(() => calculateGenderPieData(genderDistributionData), [genderDistributionData]);
 
-    const getTooltipChildren = useCallback(
-        (item) => getGenderTooltipChildren(item, isEmpty, genderDistributionData, t, renderTooltipJsx),
-        [t, isEmpty, genderDistributionData],
-    );
-   
     // Activity Indicators Config - mapped from activityData
-    const activityIndicatorsConfig = useMemo(() => 
+    const activityIndicatorsConfig = useMemo(() =>
         getActivityIndicatorsConfig(activityData, t),
         [activityData, t]
     );
 
-    // Map Data - transformed from activityData
-    const mapData = useMemo(() => getMapDataFromActivity(activityData, t), [activityData, t]);
-
     return (
         <DashboardLayout
             header={
@@ -48,126 +34,18 @@ const RestorationActivitySummary = ({ activityData, supportText, onDownload, dow
                 <KeyIndicators title={t("Key Information")} config={keyIndicatorsConfig} loading={loading} />
             </section>
 
-            <section>
-                <Widget
-                    title={t("Activity Location")}
-                    className="no-px h-w-btn-header no-pt-body  no-p-body no-pb-body"
-                    style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-                >
-                    <div style={{ flex: 1, minHeight: 0 }}>
-                        <MineSiteMap
-                            loading={loading}
-                            t={t}
-                            isSatellite={true}
-                            app={"straatos"}
-                            type={'location-territory'}
-                            showSider={false}
-                            user={null}
-                            data={mapData}
-                            maxZoom={18}
-                            primaryLink={true}
-                            style={{ height: '100%', width: '100%' }}
-                            renderTooltipForLocation={(data) => {
-                                const coordinates = data.gps?.latitude && data.gps?.longitude
-                                    ? convertDMS(data.gps.latitude, data.gps.longitude)
-                                    : null;
-
-                                if (!coordinates) {
-                                    return [];
-                                }
-
-                                const isActivityEnd = data.name === t("Activity End") || data.id?.includes('-departure');
-                                const iconColor = isActivityEnd ? "#FF7A45" : "#016C6E";
-
-                                return [
-                                    {
-                                        label: t("Coordinates"),
-                                      
-                                        value: (
-                                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'nowrap' }}>
-                                                {/* Latitude icon (vertical) */}
-                                                <div style={{ display: 'flex', alignItems: 'center' }}>
-                                                    <CustomIcon 
-                                                        name="SpacingHeight" 
-                                                        width={14} 
-                                                        height={14} 
-                                                        color={iconColor}
-                                                    />
-                                                    <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[0]}</span>
-                                                </div>
-                                                {/* Longitude icon (horizontal) */}
-                                                <div style={{ display: 'flex', alignItems: 'center' }}>
-                                                    <CustomIcon 
-                                                        name="SpacingWidth" 
-                                                        width={14} 
-                                                        height={14} 
-                                                        color={iconColor}
-                                                    />
-                                                    <span style={{ fontWeight: 600, marginLeft: '4px' }}>{coordinates[1]}</span>
-                                                </div>
-                                            </div>
-                                        ),
-                                    },
-                                ];
-                            }}
-                            renderTooltipForTerritory={(data) => {
-                                return [
-                                    {
-                                        label: t("Plot Name"),
-                                        value: data.plotName || data.name || "--",
-                                    },
-                                ];
-                            }}
-                            link={true}
-                        />
-                    </div>
-                </Widget>
-            </section>
+            <ActivityLocation activityData={activityData} loading={loading} t={t} />
 
-            <section>
-                <ActivityIndicators 
-                    config={activityIndicatorsConfig}
-                    loading={loading}
-                    title={t("Activity Indicators")}
-                    className="small-content"
-                />
-            </section>
+            <ActivityIndicators
+                config={activityIndicatorsConfig}
+                loading={loading}
+                title={t("Activity Indicators")}
+                className="small-content"
+            />
 
             <section>
-                <div style={{ maxWidth: "70%", width: "calc(100% - 405px)" }}>
-                    <ImageCarousel
-                        loading={loading}
-                        images={images}
-                        title={t("straatos::activity-imagery")}
-                        key={`${isCollapsed}-${isNestedSidebarCollapsed}`}
-                        customArrows={true}
-                        activeDotColor="#003435"
-                    />
-                </div>
-                <Widget
-                    loading={loading}
-                    title={<div>{t("Workers Distribution")}</div>}
-                    className="with-border-header h-w-btn-header "
-                >
-                    <div
-                        style={{
-                            marginTop: "auto",
-                            marginBottom: "auto",
-                        }}
-                    >
-                        <PieChart
-                            mouseXOffset={10}
-                            mouseYOffset={10}
-                            changeOpacityOnHover={false}
-                            data={pieData}
-                            doConstraints={false}
-                            isPie
-                            t={t}
-                            isEmpty={isEmpty}
-                            getTooltipChildren={getTooltipChildren}
-                        />
-                    </div>
-                </Widget>
+                <ActivityImagery activityData={activityData} loading={loading} t={t} />
+                <WorkersDistribution activityData={activityData} loading={loading} t={t} />
             </section>
         </DashboardLayout>
     )

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

@@ -0,0 +1,78 @@
+import { getFiltersConfig as getFiltersConfigStakeholders, getFilterOptions as getFilterOptionsStakeholders } from '../Stakeholders/config';
+import { getFiltersConfig as getFiltersConfigOperators, getFilterOptions as getFilterOptionsOperators } from '../Stakeholders/Operators/config';
+import { getFiltersConfig as getFiltersConfigWorkers, getFilterOptions as getFilterOptionsWorkers } from '../Stakeholders/Workers/config';
+
+import { getFiltersConfig as getFiltersConfigEvents, getFilterOptions as getFilterOptionsEvents } from '../Events/config';
+import { getFiltersConfig as getFiltersConfigActivities, getFilterOptions as getFilterOptionsActivities } from '../Events/Activities/config';
+import { getFiltersConfig as getFiltersConfigIncidents, getFilterOptions as getFilterOptionsIncidents } from '../Events/Incidents/config';
+
+import { getFiltersConfig as getFiltersConfigLocations, getFilterOptions as getFilterOptionsLocations } from '../Locations/config';
+import { getFiltersConfig as getFiltersConfigProductionSites, getFilterOptions as getFilterOptionsProductionSites } from '../Locations/MineSite/config';
+
+import { getFiltersConfig as getFilterConfigDocuments, getFilterOptions as getFilterOptionsDocuments } from '../Documents/config';
+
+
+export const getCheckboxConfig = ({ subject }) => {
+  return {
+    name: 'Name',
+    datastakeId: 'ID'
+  }
+}
+
+export const getSelectFiltersConfig = ({ subject }) => {
+  return {
+    name: '',
+    datastakeId: '',
+  }
+};
+
+const FILTER_REGISTRY = {
+    stakeholders: {
+      config: getFiltersConfigStakeholders,
+      options: getFilterOptionsStakeholders,
+    },
+    workers: {
+      config: getFiltersConfigWorkers,
+      options: getFilterOptionsWorkers,
+    },
+    operators: {
+      config: getFiltersConfigOperators,
+      options: getFilterOptionsOperators,
+    },
+    events: {
+      config: getFiltersConfigEvents,
+      options: getFilterOptionsEvents,
+    },
+    activities: {
+      config: getFiltersConfigActivities,
+      options: getFilterOptionsActivities,
+    },
+    incidents: {
+      config: getFiltersConfigIncidents,
+      options: getFilterOptionsIncidents,
+    },
+    locations: {
+      config: getFiltersConfigLocations,
+      options: getFilterOptionsLocations,
+    },
+    'production-sites': {
+      config: getFiltersConfigProductionSites,
+      options: getFilterOptionsProductionSites,
+    },
+    documents: {
+      config: getFilterConfigDocuments,
+      options: getFilterOptionsDocuments,
+    },
+  };
+  
+  const DEFAULT_SUBJECT = 'stakeholders';
+  
+  export const getFiltersConfig = ({ t, subject }) => {
+    const registry = FILTER_REGISTRY[subject] || FILTER_REGISTRY[DEFAULT_SUBJECT];
+    return registry?.config({ t });
+  };
+  
+  export const getFilterOptions = ({ t, subject, options }) => {
+    const registry = FILTER_REGISTRY[subject] || FILTER_REGISTRY[DEFAULT_SUBJECT];
+    return registry.options(options, t);
+  };

package/src/@daf/{core/components/Screens/TableScreen/TableWithTabsAndCreate → pages/TablePage}/create.jsx

@@ -4,8 +4,8 @@ import { MessageTypes } from '../../../helpers/messages.js';
 import DynamicForm from '../../core/components/DynamicForm/index.jsx';
 
 const Create = ({
-    namespace = 'stakeholders',
-    view = 'scoping',
+    namespace,
+    view,
     edit = false,
     formData = {},
     loading = false, 
@@ -27,7 +27,8 @@ const Create = ({
     changeAjaxOptions = () => {}, 
     getAppHeader = () => {},
     getApiBaseUrl = () => {}, 
-    scope
+    scope,
+    formType
 }) => {
     let {
         form = {},
@@ -52,7 +53,7 @@ const Create = ({
         <div className="daf-create-form">
             <DynamicForm 
                 form={form}
-                data={data}
+                data={{...defaultData, ...data}}
                 showSaveAndNext={false}
                 module={APP}
                 onCancel={onCancel}
@@ -75,7 +76,7 @@ const Create = ({
                     const newPayload = {
                         ...defaultData,
                         ...payloadData,
-                        form: 'stakeholder'
+                        form: formType
                     };
 
                 

package/src/@daf/pages/TablePage/hook.js

@@ -0,0 +1,123 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useGetQueryParams } from "../../hooks/useGetQueryParams.js";
+import { getFiltersConfig, getFilterOptions, getCheckboxConfig, getSelectFiltersConfig } from './config.js';
+
+export const useFetchData = ({
+    location,
+    getData,
+    activeTab,
+    extendingFilters,
+    subject,
+}) => {
+    const { paginationQuery, searchParams, otherParams, sortBy, sortDir, } = useGetQueryParams({location});
+    useEffect(() => {
+        const cleanSearchParams = Object.fromEntries(
+            Object.entries(searchParams).filter(([_, value]) => value != null && value !== '')
+        );
+
+        const hasPagination = paginationQuery.skip != null || paginationQuery.take != null;
+        
+        if (!hasPagination) {
+            return;
+        }
+
+        getData({
+            ...extendingFilters,
+            pagination: paginationQuery,
+            ...(Object.keys(otherParams).length > 0 && otherParams ),
+            ...(Object.keys(cleanSearchParams).length > 0 && { search: cleanSearchParams }),
+            tab: activeTab,
+            sortBy: {
+                [sortBy || "updatedAt"]: sortDir ? (sortDir === "ascend" ? 1 : -1) : -1,
+            },
+        }, subject)
+    }, [location.search, activeTab, JSON.stringify(extendingFilters)]);
+}
+
+export const useTablePage = ({
+    subject,
+    location,
+    getData,
+    getColumns,
+    extendingFilters,
+    options,
+    t,
+    goTo,
+    user,
+    getRedirectLink,
+    theme,
+    data,
+    applications,
+    subjectClear,
+}) => {
+    const [selectOptions, setSelectOptions] = useState();
+    const [activeTab, setActiveTab] = useState("own");
+
+    useFetchData({
+        location,
+        getData,
+        activeTab,
+        extendingFilters: extendingFilters,
+        subject,
+    });
+
+    const columns = useMemo(() => 
+        getColumns({
+            t, 
+            goTo, 
+            user,
+            options,
+            activeTab,
+            getRedirectLink, 
+            theme,
+            subject,
+            data,
+            applications,
+        }), 
+        [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications, subject, getColumns]
+    );
+
+    const selectFiltersConfig = useMemo(() => 
+        getFiltersConfig({ t, subject }), 
+        [t, subject, getFiltersConfig]
+    );
+
+    useEffect(() => {
+        setSelectOptions((prev) => ({
+            ...prev,
+            ...getFilterOptions({ t, subject, options }),
+        }));
+    }, [options, t, subject, getFilterOptions]);
+
+    const checkboxConfig = useMemo(() => 
+        getCheckboxConfig({ subject }), 
+        [subject, getCheckboxConfig]
+    );
+
+    const _filtersConfig = useMemo(() => {
+        return getSelectFiltersConfig({ subject });
+    }, [subject, getSelectFiltersConfig]);
+
+    const handleActiveTabChange = useCallback((value) => {
+        setActiveTab(value);
+    }, []);
+
+    useEffect(
+        () => () => {
+            if (subjectClear && typeof subjectClear === 'function') {
+                subjectClear();
+            }
+        },
+        [subjectClear]
+    );
+
+    return {
+        activeTab,
+        selectOptions,
+        columns,
+        selectFiltersConfig,
+        handleActiveTabChange,
+        checkboxConfig,
+        _filtersConfig,
+    };
+}

package/src/@daf/pages/TablePage/index.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx';
+import Create from './create.jsx';
+import { displayMessage } from '../../../helpers/messages.js';
+import { useTablePage } from './hook.js';
+
+const TablePage = ({
+    t = () => {},
+    goTo = () => {},
+    user = {},
+    options = {},
+    getRedirectLink = () => {},
+    theme = {},
+    loading = false,
+    data = {},
+    isMobile,
+    APP,
+    location,
+    formConfig = {
+        getFormData: () => {},
+        saveFormData: () => {},
+        formLoading: false,
+        query: {},
+        ajaxForms: {},
+        changeAjaxForms: () => {},
+        ajaxOptions: {},
+        changeAjaxOptions: () => {},
+        formData: {},
+        formValue: {},
+        form: {},
+        namespace: '',
+        view: '',
+        scope: '',
+        formType: '',
+        defaultValues: {},
+    },
+    extendingFilters = {},
+    getData = () => {},
+    getApiBaseUrl = () => {},
+    getAppHeader = () => {},
+    applications = [],
+    subjectClear,
+    subject,
+    getColumns = () => {},
+    viewConfig = {
+        title: '',
+        breadcrumbs: [],
+        createTitle: '',
+    },
+    onDownload,
+}) => {
+    
+    const {
+        activeTab,
+        selectOptions,
+        columns,
+        selectFiltersConfig,
+        handleActiveTabChange,
+        checkboxConfig,
+        _filtersConfig,
+    } = useTablePage({
+        subject,
+        location,
+        getData,
+        getColumns,
+        extendingFilters,
+        options,
+        t,
+        goTo,
+        user,
+        getRedirectLink,
+        theme,
+        data,
+        applications,
+        subjectClear,
+    });
+
+    return (
+        <TablePageWithTabs
+            t={t}
+            title={t(viewConfig.title || "")}
+            breadCrumbs={viewConfig.breadcrumbs}
+            location={location}
+            loading={loading}
+            goTo={goTo}
+            defaultActiveTab={"own"}
+            columns={columns}
+            data={data}
+            checkboxConfig={checkboxConfig}
+            APP={APP}
+            getApiBaseUrl={getApiBaseUrl}
+            selectOptions={selectOptions}
+            selectFiltersConfig={selectFiltersConfig}
+            getRedirectLink={getRedirectLink}
+            filtersConfig={_filtersConfig}
+            isMobile={isMobile}
+            view={subject}
+            getActiveTab={handleActiveTabChange}
+            onDownload={onDownload && typeof onDownload === 'function' ? onDownload : undefined}
+            drawerTitle={t(viewConfig.createTitle || "")}
+        >
+            {({onDrawerClose}) => (
+                <Create 
+                    t={t}
+                    goTo={goTo}
+                    user={user}
+                    APP={APP}
+                    getApiBaseUrl={getApiBaseUrl}
+                    getAppHeader={getAppHeader}
+                    getData={formConfig.getFormData}
+                    saveData={formConfig.saveFormData}
+                    loading={formConfig.formLoading}
+                    onSubmitted={(type, m, data) => {
+                        if (data.datastakeId) {
+                            displayMessage(
+                                type,
+                                t("affirmations::subject-created-successfully") || m,
+                            );
+                            goTo(`/app/edit/${subject}/${data.datastakeId}`);
+                        }
+                    }}
+                    onCancel={onDrawerClose}
+                    query={formConfig.query}
+                    ajaxForms={formConfig.ajaxForms}
+                    changeAjaxForms={formConfig.changeAjaxForms}
+                    ajaxOptions={formConfig.ajaxOptions}
+                    changeAjaxOptions={formConfig.changeAjaxOptions}
+                    formData={formConfig.formData}
+                    formValue={formConfig.formValue}
+                    form={formConfig.form}
+                    namespace={formConfig.namespace}
+                    view={formConfig.view}
+                    scope={formConfig.scope}
+                    formType={formConfig.formType}
+                    defaultData={formConfig.defaultValues}
+                />
+            )}
+        </TablePageWithTabs>
+    );
+};
+
+export default TablePage;

package/src/index.js

@@ -77,6 +77,7 @@ export { default as ProjectWidget } from "./@daf/core/components/Dashboard/Widge
 export { default as WidgetCard } from "./@daf/core/components/Dashboard/Widget/WidgetCard/index.js";
 export { default as CarouselWidget } from "./@daf/core/components/Dashboard/Widget/CarouselWidget/index.jsx";
 export { default as ImageCarousel } from "./@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx";
+export { default as StatCard } from "./@daf/core/components/Dashboard/Widget/StatCard/index.js";
 // export { default as WidgetCatalogue } from "./@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx";
 
 // Forms
@@ -193,6 +194,7 @@ export { InformationChannelProvider } from "./@daf/core/components/Screens/Infor
 export { default as SDGIcons } from "./@daf/core/components/UI/SDGIcon/index.jsx";
 export { default as CountryFlag } from "./@daf/core/components/UI/CountryFlag/index.jsx"
 export { default as KeyIndicatorNavigateLabel } from "./@daf/core/components/UI/KeyIndicatorNavigateLabel/index.jsx";
+export { default as MissingTagButton } from "./@daf/core/components/UI/MissingTagButton/index.jsx";
 
 //Settings
 export { default as Settings } from "./@daf/core/components/Screens/Settings/index.js";