datastake-daf 0.6.763 → 0.6.764

package/dist/services/index.js

@@ -1532,30 +1532,10 @@ var OperatorService$1 = createLazyService(OperatorService);
 
 class PartnerService extends BaseService {
   get(tab, filters) {
-    const {
-      page,
-      pageSize,
-      search,
-      searchParams,
-      ...rest
-    } = filters;
-    const params = {
-      filters: rest,
-      pagination: {
-        skip: page,
-        take: pageSize
-      }
-    };
-    if (search && searchParams.length > 0) {
-      params.search = {
-        qs: search,
-        fields: searchParams
-      };
-    }
     return this.apiGet({
       url: "/partner",
       isApp: true,
-      params
+      params: filters
     });
   }
   create(data) {

package/package.json

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

package/src/@daf/core/components/Screens/TableScreen/TablePageWithTabs/index.jsx

@@ -25,10 +25,13 @@ const TablePageWithTabs = ({
     isMobile,
     view,
     getActiveTab = () => {},
-    onDownload = () => {},
+    onDownload,
     downloadDisabled = false,
     drawerTitle = "",
     onCreateModalClose = () => {},
+    tabs = [],
+    headerTooltip,
+    drawerTooltip,
     children
 }) => {
     const params = new URLSearchParams(location?.search);
@@ -57,11 +60,12 @@ const TablePageWithTabs = ({
 						icon: "Add",
 					},
 				]}
-                onDownload={onDownload}
+                onDownload={(onDownload && typeof onDownload === 'function') ? onDownload : undefined}
                 downloadDisabled={downloadDisabled}
+                tooltip={headerTooltip}
             />
             <Tabs
-                items={[
+                items={tabs.length > 0 ? tabs : [
                     { label: t("All Data"), key: "all" },
                     { label: t("Own Data"), key: "own" },
                     { label: t("Partners"), key: "shared" },
@@ -109,13 +113,14 @@ const TablePageWithTabs = ({
                             title={t(drawerTitle)}
                         />
                     }
+                    tooltip={drawerTooltip}
                     open={openCreateModal}
                     onClose={() => setOpenCreateModal(false)}
                     width={CREATE_DRAWER_WIDTH}
                     bodyStyle={{ padding: 0 }}
                 >
                 {typeof children === 'function' 
-                    ? children({ onDrawerClose: () => setOpenCreateModal(false) })
+                    ? children({ onDrawerClose: () => setOpenCreateModal(false), open: openCreateModal })
                     : children
                 }
                 </Drawer>

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

@@ -86,10 +86,10 @@ export default function DAFTable({
   }, [sourcesKey, sources, filtersConfig, t]);
 
   useEffect(() => {
-    if (data) {
+    if (data && Array.isArray(data)) {
       setSource(data);
     }
-  }, [data]);
+  }, [data, data.length]);
 
   const paginationPageSize = pagination?.pageSize;
   const dataSource = useMemo(() => {

package/src/@daf/core/components/UI/KeyIndicatorNavigateLabel/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import CustomIcon from '../../Icon/CustomIcon.jsx'
+
+function KeyIndicatorNavigateLabel({
+    t,
+    getRedirectLink,
+    theme,
+    label,
+	link
+}) {
+  return (
+    <div className="flex">
+		<div className="flex-1">{t(label)}</div>
+			<div
+				className="cursor-pointer"
+				onClick={() => window.open(getRedirectLink(link), '_blank')}
+			>
+				<CustomIcon
+					name="LinkNewTab"
+					width={16}
+					height={16}
+					color={theme.colorPrimary}
+				/>
+		</div>
+	</div>
+  )
+}
+
+export default KeyIndicatorNavigateLabel

package/src/@daf/hooks/useFilters.js

@@ -232,7 +232,7 @@ export const useFilters = ({
   }, [pagination]);
 
   const canGoPrev = useMemo(() => pagination.current !== 1, [pagination]);
-  const canGoNext = useMemo(() => pagination.current !== totalPages && totalPages, [pagination, totalPages]);
+  const canGoNext = useMemo(() => pagination.current !== totalPages && totalPages > 0, [pagination, totalPages]);
 
   const goPrev = () => {
     if (!canGoPrev) {

package/src/@daf/layouts/AppLayout/components/MobileDrawer/index.js

@@ -28,10 +28,12 @@ export default function MobileDrawer({
   isDev = false,
   selectedProject,
   theme = {},
+  dropdownItems = [],
 }) {
   const items = useMemo(() => sidenavConfig[mod] || [], [sidenavConfig, mod]);
+  const appsWithPartners = ['tazama', 'nashiriki', 'wazi', 'hatua'];
   
-  const canViewPartners = useMemo(() => mod === 'tazama', [mod]);
+  const canViewPartners = useMemo(() => appsWithPartners.includes(mod), [mod]);
   const canViewProjects = checkPermission({ 
     permission: 'projects.canView', 
     permissions: user?.role?.permissions 
@@ -93,7 +95,7 @@ export default function MobileDrawer({
         { 
           type: 'link', 
           name: t('Partners'), 
-          path: `/app/${mod}/partners`, 
+          path: `/app/partners`, 
           isDashboard: true, 
           visible: canViewPartners 
         },

package/src/@daf/layouts/AppLayout/components/UserDropdown/index.js

@@ -6,6 +6,7 @@ import { formatClassname } from '../../../../../helpers/ClassesHelper.js';
 import { useResizeContext } from '../../../../core/context/Resize/index.js';
 import { MOBILE_W } from '../../../../../constants/Style.js';
 import MobileDrawer from '../MobileDrawer/index.js';
+import { userIsAdmin } from '../../../../../helpers/user.js';
 
 export const UserDropdownMenu = ({
   user,
@@ -24,11 +25,11 @@ export const UserDropdownMenu = ({
   isDev = false,
   theme = {},
   moduleInterfaceConfig = null,
+  dropdownItems = [],
 }) => {
   const resizeContext = useResizeContext();
   const { windowWidth } = resizeContext || {};
-  const { userIsAdmin } = userHelpers;
-  const isAdmin = useMemo(() => userIsAdmin?.(user), [user, userIsAdmin]);
+  const isAdmin = useMemo(() => userIsAdmin(user), [user]);
   
   // Add fallback for windowWidth
   const actualWidth = windowWidth || (typeof window !== 'undefined' ? window.innerWidth : 1920);
@@ -87,6 +88,7 @@ export const UserDropdownMenu = ({
         appName={appName}
         theme={theme}
         moduleInterfaceConfig={moduleInterfaceConfig}
+        dropdownItems={dropdownItems}
       />
     </div>
   ) : (
@@ -104,6 +106,25 @@ export const UserDropdownMenu = ({
                   <p>{user?.firstName || ''} {user?.lastName || ''}</p>
                 </div>
                 <div className='list'>
+                  {dropdownItems && dropdownItems
+                    .filter((item) => {
+                      if (typeof item.condition === 'function') {
+                        return item.condition({ user, isAdmin, module, checkPermission, appName });
+                      }
+                      if ('condition' in item) {
+                        return !!item.condition;
+                      }
+                      return true;
+                    })
+                    .map((item) => (
+                      <div
+                        key={item.key}
+                        className='list-item'
+                        onClick={() => handlegoTo(getRedirectLink(item.path))}
+                      >
+                        {item.name}
+                      </div>
+                    ))}
                   {user.company && !isDemoEnv && canViewUsers && !isAdmin ? (
                     <div 
                       className='list-item' 

package/src/@daf/layouts/AppLayout/index.jsx

@@ -66,6 +66,7 @@ function AppLayout({
   updateLanguage,
   getUserOptions,
   selectedProject,
+  dropdownItems = [],
   
   // Navigation (injected from app)
   goTo = () => {},
@@ -414,6 +415,7 @@ function AppLayout({
                 isDev={isDev}
                 theme={theme}
                 moduleInterfaceConfig={moduleInterfaceConfig}
+                dropdownItems={dropdownItems}
               />
             </div>
           </div>

package/src/@daf/pages/Dashboards/SupplyChain/components/ChartsContainer/components/GenderDistribution/config.js

@@ -1,9 +1,10 @@
-
-export const config = [
-	{ key: "male", label: "Male", color: "#4683DE" },
-	{ key: "female", label: "Female", color: "#A6C3EF" },
-	{ key: "other", label: "Other", color: "#B6CEF2" },
-];
+export const getConfig = (theme) => {
+    return [
+        { key: "male", label: "Male", color: theme.colorPrimary7 },
+        { key: "female", label: "Female", color: theme.colorPrimary4 },
+        { key: "other", label: "Other", color: theme.colorPrimary3 },
+    ]
+}
 
 export const getRoleColors = (theme) => {
     return [

package/src/@daf/pages/Dashboards/SupplyChain/components/ChartsContainer/components/GenderDistribution/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react'
-import { getRoleColors, config } from './config';
+import { getRoleColors, getConfig } from './config';
 import PropTypes from 'prop-types';
 import { renderTooltipJsx } from '../../../../../../../utils/tooltip.js';
 import Widget from '../../../../../../../core/components/Dashboard/Widget/index.jsx';
@@ -15,6 +15,7 @@ function GenderDistribution({
     options = {},
 }) {
     const roleColors = getRoleColors(theme);
+	const config = getConfig(theme);
 
     const pieData = useMemo(() => {
 		const total = Object.values(data).reduce((all, val) => all + (val || 0), 0);

package/src/@daf/pages/Dashboards/SupplyChain/components/KeyIndicators/config.js

@@ -1,20 +1,17 @@
 import React from "react";
 import CustomIcon from '../../../../../core/components/Icon/CustomIcon.jsx';
+import KeyIndicatorNavigateLabel from '../../../../../core/components/UI/KeyIndicatorNavigateLabel/index.jsx';
 
 export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }) => [
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Identified Mine Sites")}</div>
-				<div className="cursor-pointer" onClick={() => goTo(getRedirectLink("/app/production-sites"))}>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Identified Mine Sites" 
+				link="/app/production-sites" 
+			/>
 		),
 		render: () => {
 			return <span>{data.mineSites ?? 0}</span>;
@@ -22,20 +19,13 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 	},
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Identified Operators")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/operators"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Identified Operators" 
+				link="/app/operators" 
+			/>
 		),
 		render: () => <span>{data?.operators ?? 0}</span>,
 	},
@@ -49,39 +39,25 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 	},
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Associated Documents")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/documents"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Associated Documents" 
+				link="/app/documents" 
+			/>
 		),
 		render: () => <span>{data.documents ?? 0}</span>,
 	},
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Information Sources")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/partners"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Information Sources" 
+				link="/app/partners" 
+			/>
 		),
 		render: () => <span>{data.sources ?? 0}</span>,
 	},

package/src/@daf/pages/Dashboards/SupplyChain/index.jsx

@@ -79,9 +79,9 @@ function SupplyChain({
             <section>
                 <SupplyChainMap selectedSources={selectedPartners} t={t} goTo={goTo} options={options} getRedirectLink={getRedirectLink} />
             </section>
-            <section>
+            {/* <section>
                 <TradeRelationships selectedSources={selectedPartners} t={t} options={options} goTo={goTo} hardcodedData={hardcodedData} />
-            </section>
+            </section> */}
             <section>
                 <ChartsContainer selectedSources={selectedPartners} t={t} theme={theme} options={options} />
             </section>				

package/src/@daf/pages/Dashboards/UserDashboard/components/KeyIndicators/config.js

@@ -1,23 +1,17 @@
 import React from 'react';
 import CustomIcon from '../../../../../core/components/Icon/CustomIcon.jsx';
+import KeyIndicatorNavigateLabel from '../../../../../core/components/UI/KeyIndicatorNavigateLabel/index.jsx';
 
 export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }) => [
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Monitored Locations")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/locations"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Monitored Locations" 
+				link="/app/locations" 
+			/>
 		),
 		render: () => {
 			return <span>{data.locations ?? 0}</span>;
@@ -25,39 +19,25 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 	},
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Identified Stakeholders")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/stakeholders"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Identified Stakeholders" 
+				link="/app/stakeholders" 
+			/>
 		),
 		render: () => <span>{data?.stakeholders ?? 0}</span>,
 	},
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Corrective Actions")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/activities"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Activities" 
+				link="/app/activities" 
+			/>
 		),
 		render: () => {
 			return (
@@ -73,20 +53,13 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 	},
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Reported Incidents")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/incidents"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Reported Incidents" 
+				link="/app/incidents" 
+			/>
 		),
 		render: () => (
 			<span>
@@ -100,20 +73,13 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 	},
 	{
 		label: (
-			<div className="flex">
-				<div className="flex-1">{t("Information Sources")}</div>
-				<div
-					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/partners"))}
-				>
-					<CustomIcon
-						name="LinkNewTab"
-						width={16}
-						height={16}
-						color={theme.colorPrimary}
-					/>
-				</div>
-			</div>
+			<KeyIndicatorNavigateLabel 
+				t={t} 
+				getRedirectLink={getRedirectLink} 
+				theme={theme} 
+				label="Information Sources" 
+				link="/app/partners" 
+			/>
 		),
 		render: () => <span>{data.sources ?? 0}</span>,
 	},

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

@@ -5,6 +5,7 @@ import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } fro
 import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';
 import StakeholdersCreate from './create.jsx';
 import { displayMessage } from '../../../helpers/messages.js';
+import { useFetchData } from '../hook.js';
 
 const DocumentsTable = ({
     t = () => {},
@@ -35,6 +36,7 @@ const DocumentsTable = ({
     applications = [],
     subjectClear = () => {},
     breadcrumbs = [],
+    extendingFilters = {},
 }) => {
     const [selectOptions, setSelectOptions] = useState();
     const [activeTab, setActiveTab] = useState("own");
@@ -50,19 +52,13 @@ const DocumentsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, applications]);
 
-    const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
-
-    useEffect(() => {
-        getData({
-            pagination: paginationQuery,
-            ...(Object.keys(otherParams).length > 0 && { filters: otherParams }),
-            ...(Object.keys(searchParams).length > 0 && { search: searchParams }),
-            tab: activeTab,
-            sortBy: {
-                [sortBy || "updatedAt"]: sortDir ? (sortDir === "ascend" ? 1 : -1) : -1,
-            }
-        }, 'documents')
-    }, [paginationQuery, otherParams, searchParams, activeTab]);
+    useFetchData({
+        location,
+        getData,
+        activeTab,
+        extendingFilters,
+        subject: 'documents',
+    })
 
     const selectFiltersConfig = useMemo(() => {
         return getFiltersConfig({t});

package/src/@daf/pages/Events/Activities/index.jsx

@@ -5,6 +5,7 @@ import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } fro
 import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';
 import StakeholdersCreate from './create.jsx';
 import { displayMessage } from '../../../../helpers/messages.js';
+import { useFetchData } from '../../hook.js';
 
 const ActivitiesTable = ({
     t = () => {},
@@ -53,27 +54,13 @@ const ActivitiesTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
-
-    const filters = useMemo(() => {
-        return {
-            ...otherParams,
-            ...extendingFilters
-        }
-    }, [otherParams, extendingFilters])
-
-    useEffect(() => {
-        getData({
-            pagination: paginationQuery,
-            ...(Object.keys(searchParams).length > 0 && { search: searchParams }),
-            ...otherParams,
-            tab: activeTab,
-            sortBy: {
-                [sortBy || "updatedAt"]: sortDir ? (sortDir === "ascend" ? 1 : -1) : -1,
-            },
-            ...extendingFilters
-        }, 'activities')
-    }, [location.search, activeTab, JSON.stringify(extendingFilters)]);
+    useFetchData({
+        location,
+        getData,
+        activeTab,
+        extendingFilters,
+        subject: 'activities',
+    })
 
     const selectFiltersConfig = useMemo(() => {
         return getFiltersConfig({t});

package/src/@daf/pages/Events/Incidents/index.jsx

@@ -5,6 +5,7 @@ import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } fro
 import { useGetQueryParams } from '../../../hooks/useGetQueryParams.js';
 import StakeholdersCreate from './create.jsx';
 import { displayMessage } from '../../../../helpers/messages.js';
+import { useFetchData } from '../../hook.js';
 
 const IncidentsTable = ({
     t = () => {},
@@ -53,27 +54,13 @@ const IncidentsTable = ({
         applications,
     }), [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications]);
 
-    const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({location});
-
-    const filters = useMemo(() => {
-        return {
-            ...otherParams,
-            ...extendingFilters
-        }
-    }, [otherParams, extendingFilters])
-
-    useEffect(() => {
-        getData({
-            pagination: paginationQuery,
-            ...(Object.keys(searchParams).length > 0 && { search: searchParams }),
-            ...otherParams,
-            tab: activeTab,
-            sortBy: {
-                [sortBy || "updatedAt"]: sortDir ? (sortDir === "ascend" ? 1 : -1) : -1,
-            },
-            ...extendingFilters
-        }, 'incidents')
-    }, [location.search, activeTab, JSON.stringify(extendingFilters)]);
+    useFetchData({
+        location,
+        getData,
+        activeTab,
+        extendingFilters,
+        subject: 'incidents',
+    })
 
     const selectFiltersConfig = useMemo(() => {
         return getFiltersConfig({t});