datastake-daf 0.6.712 → 0.6.714

package/dist/hooks/index.js

@@ -2224,6 +2224,21 @@ class DashboardService extends BaseService {
       isApp: true
     });
   }
+  getUserGrowth(activeFilter) {
+    return this.apiGet({
+      url: `/accounts/dashboard/user-growth`,
+      isUserManager: true,
+      params: {
+        activeFilter
+      }
+    });
+  }
+  getAdminDashboard() {
+    return this.apiGet({
+      url: `/accounts/dashboard`,
+      isUserManager: true
+    });
+  }
 }
 var DashboardService$1 = createLazyService(DashboardService);
 
@@ -2273,8 +2288,85 @@ const useWidgetFetch = ({
   };
 };
 
+/**
+ * Generic hook for fetching admin dashboard data
+ * 
+ * @param {Object} config - Configuration object
+ * @param {Object} config.dashboardService - Service object with getDashboardData method
+ * @param {Function} config.onError - Error handler function
+ * 
+ * @returns {Object} Dashboard data and loading states
+ * 
+ * @example
+ * const { data, loading, userGrowthData, fetchUserGrowth } = useAdminDashboard({
+ *   dashboardService: {
+ *     getDashboardData: () => DashboardService.getAdminStats(),
+ *     getUserGrowth: (params) => DashboardService.getUserGrowth(params)
+ *   },
+ *   onError: (err) => console.error(err)
+ * });
+ */
+function useAdminDashboard({
+  dashboardService,
+  onError
+}) {
+  const [data, setData] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+  const [userGrowthData, setUserGrowthData] = React.useState([]);
+  const [userGrowthDataLoading, setUserGrowthDataLoading] = React.useState(false);
+  const fetchDashboardData = React.useCallback(async () => {
+    if (!dashboardService?.getDashboardData) {
+      console.warn("dashboardService.getDashboardData not provided");
+      return;
+    }
+    setLoading(true);
+    try {
+      const response = await dashboardService.getDashboardData();
+      setData(response || {});
+    } catch (err) {
+      if (onError) {
+        onError(err);
+      } else {
+        console.error("Error fetching dashboard data:", err);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [dashboardService, onError]);
+  const fetchUserGrowth = React.useCallback(async params => {
+    if (!dashboardService?.getUserGrowth) {
+      console.warn("dashboardService.getUserGrowth not provided");
+      return;
+    }
+    setUserGrowthDataLoading(true);
+    try {
+      const response = await dashboardService.getUserGrowth(params);
+      setUserGrowthData(response || []);
+    } catch (err) {
+      if (onError) {
+        onError(err);
+      } else {
+        console.error("Error fetching user growth:", err);
+      }
+    } finally {
+      setUserGrowthDataLoading(false);
+    }
+  }, [dashboardService, onError]);
+  React.useEffect(() => {
+    fetchDashboardData();
+  }, [fetchDashboardData]);
+  return {
+    data,
+    loading,
+    userGrowthData,
+    fetchUserGrowth,
+    userGrowthDataLoading
+  };
+}
+
 exports.checkPermission = checkPermission;
 exports.checkPermissionList = checkPermissionList;
+exports.useAdminDashboard = useAdminDashboard;
 exports.useFilters = useFilters;
 exports.useFirebase = useFirebase;
 exports.useHeight = useHeight;

package/dist/pages/index.js

@@ -6322,6 +6322,21 @@ class DashboardService extends BaseService {
       isApp: true
     });
   }
+  getUserGrowth(activeFilter) {
+    return this.apiGet({
+      url: `/accounts/dashboard/user-growth`,
+      isUserManager: true,
+      params: {
+        activeFilter
+      }
+    });
+  }
+  getAdminDashboard() {
+    return this.apiGet({
+      url: `/accounts/dashboard`,
+      isUserManager: true
+    });
+  }
 }
 var DashboardService$1 = createLazyService(DashboardService);
 

package/dist/services/index.js

@@ -1200,6 +1200,21 @@ class DashboardService extends BaseService {
       isApp: true
     });
   }
+  getUserGrowth(activeFilter) {
+    return this.apiGet({
+      url: `/accounts/dashboard/user-growth`,
+      isUserManager: true,
+      params: {
+        activeFilter
+      }
+    });
+  }
+  getAdminDashboard() {
+    return this.apiGet({
+      url: `/accounts/dashboard`,
+      isUserManager: true
+    });
+  }
 }
 var DashboardService$1 = createLazyService(DashboardService);
 

package/dist/style/datastake/datastake.css

@@ -1542,13 +1542,13 @@ ul.ant-menu.ant-menu-dark.ant-menu-root.ant-menu-vertical::-webkit-scrollbar-thu
 }
 
 .components-layout:not(.nested) .sidenav-sider:not(.custom) .sidenav-cont .menus-cont.not-collapsed .sidemenu-cont .ant-menu.ant-menu-root.ant-menu-inline.ant-menu-dark  
-.ant-menu-item:not(.ant-menu-item-selected) svg path
+.ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled) svg path
 {
   stroke: #ffffff !important;
 }
 
 .components-layout:not(.nested) .sidenav-sider:not(.custom) .sidenav-cont .menus-cont.not-collapsed .sidemenu-cont .ant-menu.ant-menu-root.ant-menu-inline.ant-menu-dark  
-.ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content {
+.ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled) .ant-menu-title-content {
   color: #ffffff !important;
 }
 

package/dist/utils/index.js

@@ -5127,6 +5127,9 @@ const cleanJSON = json => {
   }
   return json;
 };
+function formatToKebabCase$1(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
 
 function _checkValue$1(wantedValue, match, fieldValue) {
   match = match ? match.trim() : null;
@@ -14123,11 +14126,129 @@ const getDivergenceOrEqual = (data, keys) => {
   return data;
 };
 
+/**
+ * Utility functions for building admin dashboard configurations
+ * These functions transform simple data arrays into full configuration objects
+ */
+
+/**
+ * Format string to kebab-case
+ * @param {string} str - String to format
+ * @returns {string} Kebab-cased string
+ */
+function formatToKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+/**
+ * Build action widgets configuration
+ * 
+ * @param {Object} params
+ * @param {Array} params.widgets - Array of widget definitions
+ * @param {Function} params.getRedirectLink - Function to transform paths
+ * @param {Function} params.t - Translation function
+ * 
+ * @returns {Array} Configured action widgets
+ * 
+ * @example
+ * const widgets = buildActionWidgetsConfig({
+ *   widgets: [
+ *     { icon: "Search", title: "review-requests", path: "/accounts?pending=true" }
+ *   ],
+ *   getRedirectLink: (path) => `/app${path}`,
+ *   t: (key) => translations[key]
+ * });
+ */
+function buildActionWidgetsConfig({
+  widgets = [],
+  getRedirectLink,
+  t
+}) {
+  return widgets.map(widget => ({
+    icon: widget.icon,
+    title: widget.title,
+    goToPath: getRedirectLink ? getRedirectLink(widget.path) : widget.path,
+    disabled: widget.disabled || false
+  }));
+}
+
+/**
+ * Build key indicators configuration
+ * 
+ * @param {Object} params
+ * @param {Object} params.keyIndicatorsData - Object with indicator keys and values
+ * @param {Array} params.paths - Array of paths corresponding to each indicator
+ * @param {Function} params.getRedirectLink - Function to transform paths
+ * 
+ * @returns {Array} Configured key indicators
+ * 
+ * @example
+ * const indicators = buildKeyIndicatorsConfig({
+ *   keyIndicatorsData: { totalUsers: 100, totalAccounts: 50 },
+ *   paths: ["/users", "/accounts"],
+ *   getRedirectLink: (path) => `/app${path}`
+ * });
+ */
+function buildKeyIndicatorsConfig({
+  keyIndicatorsData = {},
+  paths = [],
+  getRedirectLink
+}) {
+  const keys = Object.keys(keyIndicatorsData);
+  return keys.map((key, index) => ({
+    title: formatToKebabCase(key),
+    valueToShow: keyIndicatorsData[key],
+    goToPath: getRedirectLink && paths[index] ? getRedirectLink(paths[index]) : paths[index] || "#"
+  }));
+}
+
+/**
+ * Build breadcrumbs configuration
+ * 
+ * @param {Object} params
+ * @param {string} params.view - View type (e.g., "accounts", "users")
+ * @param {Function} params.t - Translation function
+ * @param {Function} params.goTo - Navigation function
+ * @param {boolean} params.isView - Is in view mode
+ * @param {boolean} params.isEdit - Is in edit mode
+ * @param {string} params.id - Entity ID
+ * @param {string} params.mode - Current mode
+ * @param {string} params.group - Current group/section
+ * @param {string} params.basePath - Base path for the view
+ * 
+ * @returns {Array} Breadcrumb configuration
+ */
+function buildBreadcrumbs({
+  view,
+  t,
+  goTo,
+  isView,
+  isEdit,
+  id,
+  mode,
+  group,
+  basePath = "/app"
+}) {
+  return [{
+    label: t("Admin"),
+    path: basePath
+  }, {
+    label: t(view.charAt(0).toUpperCase() + view.slice(1)),
+    path: `${basePath}/${view}`
+  }, {
+    label: isView ? t("View") : t("Edit"),
+    path: `${basePath}/${view}/${mode}/${id}/${group}`
+  }];
+}
+
 exports.ErrorFormat = ErrorFormat;
 exports.MessageTypes = MessageTypes;
 exports.StorageManager = StorageManager;
 exports.assignParamsToUrl = assignParamsToUrl;
 exports.btn = button;
+exports.buildActionWidgetsConfig = buildActionWidgetsConfig;
+exports.buildBreadcrumbs = buildBreadcrumbs;
+exports.buildKeyIndicatorsConfig = buildKeyIndicatorsConfig;
 exports.buildQueryString = buildQueryString;
 exports.camelCaseToTitle = camelCaseToTitle;
 exports.capitalize = capitalize;
@@ -14155,6 +14276,7 @@ exports.filterSelectOptions = filterSelectOptions;
 exports.filterString = filterString;
 exports.findOptions = findOptions;
 exports.formatErrors = formatErrors;
+exports.formatToKebabCase = formatToKebabCase$1;
 exports.getDefaultActiveFilters = getDefaultActiveFilters;
 exports.getDivergenceOrEqual = getDivergenceOrEqual;
 exports.getImageUploadViewValue = getImageUploadViewValue;

package/package.json

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

package/src/@daf/core/components/Icon/configs/UnderDev.js

@@ -0,0 +1,15 @@
+const config = {
+    viewBox: "0 0 105 105",
+    children: (
+        <>
+        <svg width="105" height="105" viewBox="0 0 105 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 26.25L45.9375 45.9375L26.25 26.25Z" fill="white"/>
+<path d="M13.125 8.75L26.25 13.125V26.25H13.125L8.75 13.125L13.125 8.75Z" fill="white"/>
+<path d="M84.2581 11.9919L72.7622 23.4878C71.0297 25.2203 70.1634 26.0866 69.8388 27.0856C69.5533 27.9642 69.5533 28.9108 69.8388 29.7894C70.1634 30.7884 71.0297 31.6547 72.7622 33.3872L73.8003 34.4253C75.5328 36.1578 76.3991 37.0241 77.398 37.3487C78.2767 37.6342 79.2233 37.6342 80.102 37.3487C81.1009 37.0241 81.9672 36.1578 83.6997 34.4253L94.4531 23.6719C95.6113 26.4901 96.25 29.5767 96.25 32.8125C96.25 46.1019 85.4768 56.875 72.1875 56.875C70.5853 56.875 69.0197 56.7184 67.5052 56.4197C65.3783 56.0003 64.3149 55.7905 63.6702 55.8548C62.9848 55.923 62.647 56.0258 62.0397 56.3508C61.4685 56.6565 60.8955 57.2295 59.7495 58.3755L28.4375 89.6874C24.8131 93.3118 18.9369 93.3118 15.3125 89.6874C11.6881 86.0631 11.6881 80.1868 15.3125 76.5624L46.6245 45.2505C47.7705 44.1045 48.3435 43.5315 48.6492 42.9603C48.9742 42.353 49.077 42.0152 49.1452 41.3298C49.2095 40.6851 48.9997 39.6217 48.5803 37.4948C48.2816 35.9803 48.125 34.4147 48.125 32.8125C48.125 19.5231 58.8981 8.75 72.1875 8.75C76.5866 8.75 80.7099 9.93048 84.2581 11.9919Z" fill="white"/>
+<path d="M52.5002 65.6248L76.5625 89.687C80.1868 93.3114 86.0631 93.3114 89.6874 89.687C93.3118 86.0627 93.3118 80.1864 89.6874 76.562L69.892 56.7669C68.4907 56.6343 67.1243 56.3815 65.8034 56.019C64.1013 55.5518 62.2341 55.8909 60.986 57.139L52.5002 65.6248Z" fill="white"/>
+<path d="M26.25 26.25L45.9375 45.9375M26.25 26.25H13.125L8.75 13.125L13.125 8.75L26.25 13.125V26.25ZM84.2581 11.9919L72.7622 23.4878C71.0297 25.2203 70.1634 26.0866 69.8388 27.0855C69.5533 27.9642 69.5533 28.9108 69.8388 29.7895C70.1634 30.7884 71.0297 31.6547 72.7622 33.3872L73.8003 34.4253C75.5328 36.1578 76.3991 37.0241 77.398 37.3487C78.2767 37.6342 79.2233 37.6342 80.102 37.3487C81.1009 37.0241 81.9672 36.1578 83.6997 34.4253L94.4531 23.6719C95.6113 26.4901 96.25 29.5767 96.25 32.8125C96.25 46.1019 85.4768 56.875 72.1875 56.875C70.5853 56.875 69.0197 56.7184 67.5052 56.4197C65.3783 56.0003 64.3149 55.7905 63.6702 55.8548C62.9848 55.9231 62.647 56.0258 62.0397 56.3508C61.4685 56.6565 60.8955 57.2295 59.7495 58.3755L28.4375 89.6874C24.8131 93.3118 18.9369 93.3118 15.3125 89.6874C11.6881 86.0631 11.6881 80.1868 15.3125 76.5624L46.6245 45.2505C47.7705 44.1045 48.3435 43.5315 48.6492 42.9603C48.9742 42.353 49.0769 42.0152 49.1452 41.3298C49.2095 40.6851 48.9997 39.6217 48.5803 37.4948C48.2816 35.9803 48.125 34.4147 48.125 32.8125C48.125 19.5231 58.8981 8.75 72.1875 8.75C76.5866 8.75 80.7099 9.93048 84.2581 11.9919ZM52.5002 65.6248L76.5625 89.687C80.1868 93.3114 86.0631 93.3114 89.6874 89.687C93.3118 86.0627 93.3118 80.1864 89.6874 76.562L69.892 56.7669C68.4907 56.6343 67.1243 56.3815 65.8034 56.019C64.1013 55.5518 62.2341 55.8909 60.986 57.139L52.5002 65.6248Z" stroke="#AD8A47" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+        </>
+    )
+}

package/src/@daf/core/components/Screens/Admin/adminRoutes.js

@@ -8,7 +8,7 @@ import AdminAccountsViewScreen from "./AdminScreens/AccountsView.jsx";
  * Generate Admin Routes for any application
  * 
  * This function returns a complete set of admin routes that can be used directly
- * in your application's route configuration. Just provide the configuration and
+ * in  application's route configuration. Just provide the configuration and
  * you get back ready-to-use routes.
  * 
  * @param {Object} config - Application-specific configuration

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

@@ -0,0 +1,84 @@
+import { useState, useEffect, useCallback } from "react";
+
+/**
+ * Generic hook for fetching admin dashboard data
+ * 
+ * @param {Object} config - Configuration object
+ * @param {Object} config.dashboardService - Service object with getDashboardData method
+ * @param {Function} config.onError - Error handler function
+ * 
+ * @returns {Object} Dashboard data and loading states
+ * 
+ * @example
+ * const { data, loading, userGrowthData, fetchUserGrowth } = useAdminDashboard({
+ *   dashboardService: {
+ *     getDashboardData: () => DashboardService.getAdminStats(),
+ *     getUserGrowth: (params) => DashboardService.getUserGrowth(params)
+ *   },
+ *   onError: (err) => console.error(err)
+ * });
+ */
+export function useAdminDashboard({ dashboardService, onError }) {
+	const [data, setData] = useState({});
+	const [loading, setLoading] = useState(false);
+	const [userGrowthData, setUserGrowthData] = useState([]);
+	const [userGrowthDataLoading, setUserGrowthDataLoading] = useState(false);
+
+	const fetchDashboardData = useCallback(async () => {
+		if (!dashboardService?.getDashboardData) {
+			console.warn("dashboardService.getDashboardData not provided");
+			return;
+		}
+
+		setLoading(true);
+		try {
+			const response = await dashboardService.getDashboardData();
+			setData(response || {});
+		} catch (err) {
+			if (onError) {
+				onError(err);
+			} else {
+				console.error("Error fetching dashboard data:", err);
+			}
+		} finally {
+			setLoading(false);
+		}
+	}, [dashboardService, onError]);
+
+	const fetchUserGrowth = useCallback(
+		async (params) => {
+			if (!dashboardService?.getUserGrowth) {
+				console.warn("dashboardService.getUserGrowth not provided");
+				return;
+			}
+
+			setUserGrowthDataLoading(true);
+			try {
+				const response = await dashboardService.getUserGrowth(params);
+				setUserGrowthData(response || []);
+			} catch (err) {
+				if (onError) {
+					onError(err);
+				} else {
+					console.error("Error fetching user growth:", err);
+				}
+			} finally {
+				setUserGrowthDataLoading(false);
+			}
+		},
+		[dashboardService, onError]
+	);
+
+	useEffect(() => {
+		fetchDashboardData();
+	}, [fetchDashboardData]);
+
+	return {
+		data,
+		loading,
+		userGrowthData,
+		fetchUserGrowth,
+		userGrowthDataLoading,
+	};
+}
+

package/src/@daf/services/DashboardService.js

@@ -9,6 +9,21 @@ class DashboardService extends BaseService {
           isApp: true,
         });
     }
+
+    getUserGrowth(activeFilter) {
+      return this.apiGet({
+        url: `/accounts/dashboard/user-growth`,
+        isUserManager: true,
+        params: { activeFilter },
+      });
+    }
+
+    getAdminDashboard() { 
+      return this.apiGet({
+        url: `/accounts/dashboard`,
+        isUserManager: true,
+      });
+    }
 }
 
 export default createLazyService(DashboardService);

package/src/@daf/utils/adminConfigBuilders.js

@@ -0,0 +1,102 @@
+/**
+ * Utility functions for building admin dashboard configurations
+ * These functions transform simple data arrays into full configuration objects
+ */
+
+/**
+ * Format string to kebab-case
+ * @param {string} str - String to format
+ * @returns {string} Kebab-cased string
+ */
+export function formatToKebabCase(str) {
+	return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+/**
+ * Build action widgets configuration
+ * 
+ * @param {Object} params
+ * @param {Array} params.widgets - Array of widget definitions
+ * @param {Function} params.getRedirectLink - Function to transform paths
+ * @param {Function} params.t - Translation function
+ * 
+ * @returns {Array} Configured action widgets
+ * 
+ * @example
+ * const widgets = buildActionWidgetsConfig({
+ *   widgets: [
+ *     { icon: "Search", title: "review-requests", path: "/accounts?pending=true" }
+ *   ],
+ *   getRedirectLink: (path) => `/app${path}`,
+ *   t: (key) => translations[key]
+ * });
+ */
+export function buildActionWidgetsConfig({ widgets = [], getRedirectLink, t }) {
+	return widgets.map((widget) => ({
+		icon: widget.icon,
+		title: widget.title,
+		goToPath: getRedirectLink ? getRedirectLink(widget.path) : widget.path,
+		disabled: widget.disabled || false,
+	}));
+}
+
+/**
+ * Build key indicators configuration
+ * 
+ * @param {Object} params
+ * @param {Object} params.keyIndicatorsData - Object with indicator keys and values
+ * @param {Array} params.paths - Array of paths corresponding to each indicator
+ * @param {Function} params.getRedirectLink - Function to transform paths
+ * 
+ * @returns {Array} Configured key indicators
+ * 
+ * @example
+ * const indicators = buildKeyIndicatorsConfig({
+ *   keyIndicatorsData: { totalUsers: 100, totalAccounts: 50 },
+ *   paths: ["/users", "/accounts"],
+ *   getRedirectLink: (path) => `/app${path}`
+ * });
+ */
+export function buildKeyIndicatorsConfig({ keyIndicatorsData = {}, paths = [], getRedirectLink }) {
+	const keys = Object.keys(keyIndicatorsData);
+
+	return keys.map((key, index) => ({
+		title: formatToKebabCase(key),
+		valueToShow: keyIndicatorsData[key],
+		goToPath: getRedirectLink && paths[index] ? getRedirectLink(paths[index]) : paths[index] || "#",
+	}));
+}
+
+/**
+ * Build breadcrumbs configuration
+ * 
+ * @param {Object} params
+ * @param {string} params.view - View type (e.g., "accounts", "users")
+ * @param {Function} params.t - Translation function
+ * @param {Function} params.goTo - Navigation function
+ * @param {boolean} params.isView - Is in view mode
+ * @param {boolean} params.isEdit - Is in edit mode
+ * @param {string} params.id - Entity ID
+ * @param {string} params.mode - Current mode
+ * @param {string} params.group - Current group/section
+ * @param {string} params.basePath - Base path for the view
+ * 
+ * @returns {Array} Breadcrumb configuration
+ */
+export function buildBreadcrumbs({ view, t, goTo, isView, isEdit, id, mode, group, basePath = "/app" }) {
+	return [
+		{
+			label: t("Admin"),
+			path: basePath,
+		},
+		{
+			label: t(view.charAt(0).toUpperCase() + view.slice(1)),
+			path: `${basePath}/${view}`,
+		},
+		{
+			label: isView ? t("View") : t("Edit"),
+			path: `${basePath}/${view}/${mode}/${id}/${group}`,
+		},
+	];
+}
+

package/src/helpers/StringHelper.js

@@ -184,4 +184,10 @@ export const cleanJSON = (json) => {
       */
   }
   return json;
+}
+
+export function formatToKebabCase(str) {
+  return str
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .toLowerCase();
 }

package/src/hooks.js

@@ -11,4 +11,5 @@ export { useMapOnExpandableWidget } from "./@daf/hooks/useMapOnExpandableWidget"
 export { checkPermission, checkPermissionList, usePermissions } from "./@daf/hooks/usePermissions";
 export { useFirebase } from "./@daf/hooks/useFirebase.js"
 export { useIsDatastake } from "./@daf/hooks/useIsDatastake.js"
-export { useWidgetFetch } from "./@daf/hooks/useWidgetFetch.js"
+export { useWidgetFetch } from "./@daf/hooks/useWidgetFetch.js"
+export { useAdminDashboard } from "./@daf/hooks/useAdminDashboard.js"

package/src/styles/datastake/datastake.css

@@ -1542,13 +1542,13 @@ ul.ant-menu.ant-menu-dark.ant-menu-root.ant-menu-vertical::-webkit-scrollbar-thu
 }
 
 .components-layout:not(.nested) .sidenav-sider:not(.custom) .sidenav-cont .menus-cont.not-collapsed .sidemenu-cont .ant-menu.ant-menu-root.ant-menu-inline.ant-menu-dark  
-.ant-menu-item:not(.ant-menu-item-selected) svg path
+.ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled) svg path
 {
   stroke: #ffffff !important;
 }
 
 .components-layout:not(.nested) .sidenav-sider:not(.custom) .sidenav-cont .menus-cont.not-collapsed .sidemenu-cont .ant-menu.ant-menu-root.ant-menu-inline.ant-menu-dark  
-.ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content {
+.ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled) .ant-menu-title-content {
   color: #ffffff !important;
 }
 

package/src/utils.js

@@ -9,7 +9,7 @@ export { renderTooltip, renderTooltipJsx } from './@daf/utils/tooltip'
 export { getRangeOfTicks } from './helpers/chart'
 
 export { propHasValue } from './helpers/deepFind'
-export { isEmptyOrSpaces, capitalizeAll, capitalize, camelCaseToTitle, snakeCaseToTitleCase, titleToCamelCase, findOptions, getOptionAsObject, nowToIso, renderTemplateString, renderTemplateStringInObject, truncateString, splitStringInMultipleLines, safeJsonParse, cleanJSON } from './helpers/StringHelper.js'
+export { isEmptyOrSpaces, capitalizeAll, capitalize, camelCaseToTitle, snakeCaseToTitleCase, titleToCamelCase, findOptions, getOptionAsObject, nowToIso, renderTemplateString, renderTemplateStringInObject, truncateString, splitStringInMultipleLines, safeJsonParse, cleanJSON, formatToKebabCase } from './helpers/StringHelper.js'
 export { getNkey, groupSubsections, getImageUploadViewValue } from './@daf/core/components/ViewForm/helper'
 export { renderRows } from './@daf/core/components/Table/helper'
 export { filterOptions, filterString, hasNotChanged, filterSelectOptions, mapSubGroupsInSubmit, mapSubGroupsInGet, filterCreateData, changeInputMeta, renderDateFormatted } from './helpers/Forms'
@@ -52,4 +52,10 @@ export { createTheme, createAdminTheme } from './helpers/theme.js';
 
 export { getRedirectLink } from "./@daf/hooks/useIsDatastake.js"
 
-export { getSourceString, getDivergenceOrEqual } from './helpers/stringHelper.jsx'
+export { getSourceString, getDivergenceOrEqual } from './helpers/stringHelper.jsx'
+
+export { 
+	buildActionWidgetsConfig, 
+	buildKeyIndicatorsConfig, 
+	buildBreadcrumbs
+} from './@daf/utils/adminConfigBuilders.js'

package/src/@daf/core/components/Screens/Admin/AdminScreens/README.md

@@ -1,216 +0,0 @@
-# Admin Screens - Reusable Admin Panel Components
-
-This module provides ready-to-use admin panel screens that can be easily configured for any application.
-
-## 🎯 Purpose
-
-The admin panel is mostly static across applications - it only needs configuration changes (app name, services, etc.). These components allow you to:
-
-1. **Export admin routes from DAF** instead of duplicating code per application
-2. **Configure via props** instead of rewriting components
-3. **Maintain consistency** across all applications using DAF
-
-## 📦 Available Components
-
-### 1. `AdminDashboardScreen`
-The main admin dashboard with key indicators, action widgets, and statistics.
-
-**Configuration:**
-```javascript
-{
-  appName: "wazi",                    // App name for translations
-  goTo: useNavigate(),                // Navigation function
-  t: useTranslation(),                // Translation function
-  getRedirectLink: (path) => path,    // Redirect link generator
-  getActionWidgetsConfig: (opts) => [],  // Action widgets config
-  getKeyIndicatorsConfig: (opts) => [],  // Key indicators config
-  useWidgetFetch: () => {}            // Hook to fetch dashboard data
-}
-```
-
-### 2. `AdminUsersScreen`
-User management table with impersonation, password reset, etc.
-
-**Configuration:**
-```javascript
-{
-  appName: "wazi",
-  module: APP,                        // App identifier
-  goTo: useNavigate(),
-  t: useTranslation(),
-  location: useLocation(),
-  isMobile: false,
-  userRoles: [],                      // User roles config
-  accountTypes: [],                   // Account types config
-  getRedirectLink: (path) => path,
-  AdminService: {},                   // Admin service methods
-  AuthenticationService: {},          // Auth service methods
-  handleError: (err) => {},           // Error handler
-  getAppRedirect: ({token}) => ""     // App redirect for impersonation
-}
-```
-
-### 3. `AdminAccountsScreen`
-Accounts management table with invitation management.
-
-**Configuration:**
-```javascript
-{
-  appName: "wazi",
-  module: APP,
-  goTo: useNavigate(),
-  t: useTranslation(),
-  location: useLocation(),
-  isMobile: false,
-  accountTypes: [],
-  getRedirectLink: (path) => path,
-  AdminService: {},
-  options: { countries: [] },         // Options with countries, etc.
-  useQuery: () => {},                 // Query params hook
-  NewAccountModal: Component          // Optional custom modal
-}
-```
-
-### 4. `AdminAccountsViewScreen`
-View/Edit individual accounts with user management.
-
-**Configuration:**
-```javascript
-{
-  module: APP,
-  goTo: useNavigate(),
-  t: useTranslation(),
-  location: useLocation(),
-  getRedirectLink: (path) => path,
-  renderBreadCrumbs: (opts) => [],    // Breadcrumbs renderer
-  id: "account-id",                   // From route params
-  mode: "view|edit",                  // From route params
-  group: "general",                   // From route params
-  userRoles: [],
-  options: { countries: [] },
-  accountTypes: [],
-  accountStatuses: [],
-  getAccountData: (opts) => {},       // Fetch account data
-  updateAccount: (opts) => {},        // Update account
-  handleError: (err) => {},
-  toggleAccountStatus: (opts) => {},  // Toggle account status
-  transferAdmin: (opts) => {}         // Transfer admin rights
-}
-```
-
-## 🚀 Usage in Applications
-
-### Step 1: Create Configuration Hooks
-
-Create a file `privateRoutes/adminConfig.js` in your application:
-
-```javascript
-import { useNavigate, useLocation, useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-// ... import your services and hooks
-
-export function useAdminDashboardConfig() {
-  const goTo = useNavigate();
-  const { t } = useTranslation();
-  // ... gather all needed config
-  
-  return {
-    appName: "your-app",
-    goTo,
-    t,
-    // ... all other config
-  };
-}
-
-// Create similar hooks for other screens
-```
-
-### Step 2: Create Wrapper Components
-
-In your `privateRoutes/index.js`:
-
-```javascript
-import {
-  AdminDashboardScreen,
-  AdminUsersScreen,
-  AdminAccountsScreen,
-  AdminAccountsViewScreen,
-} from "datastake-daf/dist/components";
-import {
-  useAdminDashboardConfig,
-  useAdminUsersConfig,
-  useAdminAccountsConfig,
-  useAdminAccountsViewConfig,
-} from "./adminConfig";
-
-function DashboardWrapper() {
-  const config = useAdminDashboardConfig();
-  return <AdminDashboardScreen config={config} />;
-}
-
-// Create similar wrappers for other screens
-```
-
-### Step 3: Define Routes
-
-```javascript
-const routes = [
-  {
-    path: "",
-    key: "APP_YOUR_APP_DASHBOARD",
-    component: <DashboardWrapper />,
-    visible: () => true,
-  },
-  {
-    path: "accounts",
-    key: "APP_YOUR_APP_ACCOUNTS",
-    component: <AccountsWrapper />,
-    visible: (user) => userIsAdmin(user),
-  },
-  // ... more routes
-];
-```
-
-## ✅ Benefits
-
-1. **No Code Duplication**: Write admin logic once in DAF, use everywhere
-2. **Easy Maintenance**: Fix bugs once, applies to all apps
-3. **Consistent UX**: Same admin experience across all applications
-4. **Configurable**: Each app can customize behavior via config
-5. **Type Safe**: Well-documented configuration interfaces
-
-## 🔄 Migration from Old Pattern
-
-**Before** (duplicated code per app):
-```
-wazi-frontend/src/screens/Admin/
-  ├── Dashboard/index.js         ❌ Duplicated
-  ├── Users/index.js              ❌ Duplicated
-  └── Accounts/index.js           ❌ Duplicated
-```
-
-**After** (configuration only):
-```
-wazi-frontend/src/privateRoutes/
-  ├── index.js                    ✅ Route definitions
-  └── adminConfig.js              ✅ Configuration hooks
-```
-
-## 📚 Example: Complete Setup
-
-See `/wazi-frontend/src/privateRoutes/` for a complete working example of how to configure and use these admin screens.
-
-## 🔧 Customization
-
-If you need custom behavior:
-
-1. **Small changes**: Use configuration options
-2. **Moderate changes**: Create a custom wrapper component
-3. **Large changes**: Extend the base admin components
-
-## 📝 Notes
-
-- All screens expect React Router hooks (useNavigate, useLocation, useParams)
-- Translation keys follow the pattern: `{appName}::key` and `admin::key`
-- Services should follow the AdminService interface from DAF
-