datastake-daf 0.6.711 → 0.6.712

package/dist/pages/index.js

@@ -6322,21 +6322,6 @@ 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,21 +1200,6 @@ 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):not(.ant-menu-item-disabled) svg path
+.ant-menu-item:not(.ant-menu-item-selected) 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):not(.ant-menu-item-disabled) .ant-menu-title-content {
+.ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content {
   color: #ffffff !important;
 }
 

package/dist/utils/index.js

@@ -5127,9 +5127,6 @@ const cleanJSON = json => {
   }
   return json;
 };
-function formatToKebabCase(str) {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
 
 function _checkValue$1(wantedValue, match, fieldValue) {
   match = match ? match.trim() : null;
@@ -14158,7 +14155,6 @@ exports.filterSelectOptions = filterSelectOptions;
 exports.filterString = filterString;
 exports.findOptions = findOptions;
 exports.formatErrors = formatErrors;
-exports.formatToKebabCase = formatToKebabCase;
 exports.getDefaultActiveFilters = getDefaultActiveFilters;
 exports.getDivergenceOrEqual = getDivergenceOrEqual;
 exports.getImageUploadViewValue = getImageUploadViewValue;

package/package.json

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

package/src/@daf/core/components/Screens/Admin/AdminScreens/Accounts.jsx

@@ -0,0 +1,109 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { message } from "antd";
+import AccountTable from "../AdminTables/AccountTable/index.jsx";
+
+/**
+ * Admin Accounts Screen Wrapper
+ * This is a ready-to-use route component that can be configured per application
+ * 
+ * @param {Object} config - Application configuration
+ * @param {string} config.appName - Application name
+ * @param {string} config.module - Module identifier (APP constant)
+ * @param {Function} config.goTo - Navigation function
+ * @param {Function} config.t - Translation function
+ * @param {Object} config.location - Router location object
+ * @param {boolean} config.isMobile - Is mobile viewport
+ * @param {Array} config.accountTypes - Account types configuration
+ * @param {Function} config.getRedirectLink - Function to get redirect links
+ * @param {Object} config.AdminService - Admin service with methods
+ * @param {Object} config.options - Options object with countries, etc.
+ * @param {Function} config.useQuery - Hook to get query parameters
+ * @param {Component} config.NewAccountModal - Custom NewAccount modal component (optional)
+ */
+export default function AdminAccountsScreen({ config }) {
+	const {
+		appName = "app",
+		module,
+		goTo,
+		t,
+		location,
+		isMobile,
+		accountTypes,
+		getRedirectLink,
+		AdminService,
+		options,
+		useQuery,
+		NewAccountModal,
+	} = config;
+
+	const query = useQuery ? useQuery() : { get: () => null };
+	const [addAccountVisible, setAddAccountVisible] = useState(!!query.get("create"));
+
+	const onResendInvitation = useCallback(() => {
+		// TODO: implement in calling app if needed
+		message.success(t("Invitation email resent"));
+	}, [t]);
+
+	const onCopyInvitation = useCallback(() => {
+		message.success(t("Invitation link copied"));
+	}, [t]);
+
+	const actionButtons = useMemo(
+		() => [
+			{
+				type: "primary",
+				onClick: () => setAddAccountVisible(true),
+				tooltip: t("Add"),
+				icon: "Add",
+			},
+		],
+		[t]
+	);
+
+	function handleGetData(params) {
+		return AdminService.getAccounts(params);
+	}
+
+	function handleCancelVerification(token) {
+		return AdminService.cancelInvitation(token);
+	}
+
+	return (
+		<>
+			<AccountTable
+				t={t}
+				goTo={goTo}
+				location={location}
+				getRedirectLink={getRedirectLink}
+				isMobile={isMobile}
+				module={module}
+				headerTitle="accounts"
+				actionButton={actionButtons}
+				getData={handleGetData}
+				config={{
+					accountTypes,
+					options: {
+						countries: options?.countries,
+					},
+					onTableClick: {
+						onCanelVerification: handleCancelVerification,
+						onCopyInvitation,
+						onResendInvitation,
+						setAddAccountVisible,
+					},
+				}}
+			/>
+
+			{NewAccountModal && (
+				<NewAccountModal
+					fetchData={() => {
+						// Refresh table data - handled by AccountTable internally
+					}}
+					addAccountVisible={addAccountVisible}
+					onClose={() => setAddAccountVisible(false)}
+				/>
+			)}
+		</>
+	);
+}
+

package/src/@daf/core/components/Screens/Admin/AdminScreens/AccountsView.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import AdminView from "../AdminViews/index.jsx";
+
+/**
+ * Admin Accounts View/Edit Screen Wrapper
+ * This is a ready-to-use route component for viewing/editing accounts
+ * 
+ * @param {Object} config - Application configuration
+ * @param {string} config.module - Module identifier (APP constant)
+ * @param {Function} config.goTo - Navigation function
+ * @param {Function} config.t - Translation function
+ * @param {Object} config.location - Router location object
+ * @param {Function} config.getRedirectLink - Function to get redirect links
+ * @param {Function} config.renderBreadCrumbs - Function to render breadcrumbs
+ * @param {string} config.id - Account ID from route params
+ * @param {string} config.mode - "view" or "edit"
+ * @param {string} config.group - Current group/section being viewed
+ * @param {Array} config.userRoles - User roles configuration
+ * @param {Object} config.options - Options object with countries, etc.
+ * @param {Array} config.accountTypes - Account types configuration
+ * @param {Array} config.accountStatuses - Account statuses configuration
+ * @param {Function} config.getAccountData - Function to fetch account data
+ * @param {Function} config.updateAccount - Function to update account
+ * @param {Function} config.handleError - Error handling function
+ * @param {Function} config.toggleAccountStatus - Function to toggle account status
+ * @param {Function} config.transferAdmin - Function to transfer admin rights
+ */
+export default function AdminAccountsViewScreen({ config }) {
+	const {
+		module,
+		goTo,
+		t,
+		location,
+		getRedirectLink,
+		renderBreadCrumbs,
+		id,
+		mode,
+		group,
+		userRoles,
+		options,
+		accountTypes,
+		accountStatuses,
+		getAccountData,
+		updateAccount,
+		handleError,
+		toggleAccountStatus,
+		transferAdmin,
+	} = config;
+
+	return (
+		<AdminView
+			t={t}
+			goTo={goTo}
+			getRedirectLink={getRedirectLink}
+			location={location}
+			renderBreadCrumbs={renderBreadCrumbs}
+			id={id}
+			mode={mode}
+			group={group}
+			module={module}
+			userRoles={userRoles}
+			options={options}
+			accountTypes={accountTypes}
+			accountStatuses={accountStatuses}
+			getAccountData={getAccountData}
+			updateAccount={updateAccount}
+			handleError={handleError}
+			toggleAccountStatus={toggleAccountStatus}
+			transferAdmin={transferAdmin}
+		/>
+	);
+}
+

package/src/@daf/core/components/Screens/Admin/AdminScreens/Dashboard.jsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from "react";
+import AdminDashboard from "../AdminDashboard/index.jsx";
+
+/**
+ * Admin Dashboard Screen Wrapper
+ * This is a ready-to-use route component that can be configured per application
+ * 
+ * @param {Object} config - Application configuration
+ * @param {string} config.appName - Application name for translations (e.g., "wazi", "tazama")
+ * @param {Function} config.goTo - Navigation function (useNavigate)
+ * @param {Function} config.t - Translation function (useTranslation)
+ * @param {Function} config.getRedirectLink - Function to get redirect links
+ * @param {Function} config.getActionWidgetsConfig - Function that returns action widgets config
+ * @param {Function} config.getKeyIndicatorsConfig - Function that returns key indicators config
+ * @param {Function} config.useWidgetFetch - Hook to fetch dashboard data
+ */
+export default function AdminDashboardScreen({ config }) {
+	const {
+		appName = "app",
+		goTo,
+		t,
+		getRedirectLink,
+		getActionWidgetsConfig,
+		getKeyIndicatorsConfig,
+		useWidgetFetch,
+	} = config;
+
+	const {
+		data,
+		loading,
+		userGrowthData,
+		fetchUserGrowth,
+		userGrowthDataLoading,
+	} = useWidgetFetch();
+
+	const actionsWidgetsConfig = useMemo(
+		() => getActionWidgetsConfig({ getRedirectLink }),
+		[getRedirectLink]
+	);
+
+	const keyIndicatorsConfig = useMemo(
+		() =>
+			getKeyIndicatorsConfig({
+				getRedirectLink,
+				keyIndicatorsData: data?.keyInformation,
+			}),
+		[data?.keyInformation, getRedirectLink]
+	);
+
+	// Dummy data for top contributors if not provided
+	const TOTAL_DUMMY = [
+		{ label: "Contributor 1", Score: 0 },
+		{ label: "Contributor 2", Score: 0 },
+		{ label: "Contributor 3", Score: 0 },
+		{ label: "Contributor 4", Score: 0 },
+		{ label: "Contributor 5", Score: 0 },
+	];
+
+	return (
+		<AdminDashboard
+			t={t}
+			loading={loading}
+			goTo={goTo}
+			actionWidgetConfig={actionsWidgetsConfig}
+			loadingUserGrowth={userGrowthDataLoading}
+			fetchUserGrowth={fetchUserGrowth}
+			data={{
+				keyIndicatorsData: keyIndicatorsConfig,
+				userActivityData: data?.userActivity,
+				topContributorsData: data?.topContributors || TOTAL_DUMMY,
+				userGrowthData: userGrowthData,
+			}}
+			adminTranslationIdentifier={appName}
+		/>
+	);
+}
+

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

@@ -0,0 +1,216 @@
+# 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
+

package/src/@daf/core/components/Screens/Admin/AdminScreens/Users.jsx

@@ -0,0 +1,117 @@
+import React, { useCallback } from "react";
+import { message, Modal } from "antd";
+import UserTable from "../AdminTables/UserTable/index.jsx";
+
+/**
+ * Admin Users Screen Wrapper
+ * This is a ready-to-use route component that can be configured per application
+ * 
+ * @param {Object} config - Application configuration
+ * @param {string} config.appName - Application name
+ * @param {string} config.module - Module identifier (APP constant)
+ * @param {Function} config.goTo - Navigation function
+ * @param {Function} config.t - Translation function
+ * @param {Object} config.location - Router location object
+ * @param {boolean} config.isMobile - Is mobile viewport
+ * @param {Array} config.userRoles - User roles configuration
+ * @param {Array} config.accountTypes - Account types configuration
+ * @param {Function} config.getRedirectLink - Function to get redirect links
+ * @param {Object} config.AdminService - Admin service with methods
+ * @param {Object} config.AuthenticationService - Authentication service
+ * @param {Function} config.handleError - Error handling function
+ * @param {Function} config.getAppRedirect - Get app redirect URL for impersonation
+ */
+export default function AdminUsersScreen({ config }) {
+	const {
+		appName = "app",
+		module,
+		goTo,
+		t,
+		location,
+		isMobile,
+		userRoles,
+		accountTypes,
+		getRedirectLink,
+		AdminService,
+		AuthenticationService,
+		handleError,
+		getAppRedirect,
+	} = config;
+
+	const onImpersonate = useCallback(
+		async (id) => {
+			try {
+				const { data } = await AdminService.impersonate({ id });
+				localStorage.setItem("previous", true);
+				localStorage.setItem("previous_app", module);
+				window.location = getAppRedirect({ token: data.token });
+			} catch (err) {
+				handleError(err);
+			}
+		},
+		[AdminService, module, getAppRedirect, handleError]
+	);
+
+	const onResendVerification = useCallback(() => {
+		// TODO: implement in calling app if needed
+		message.success(t("Verification email resent"));
+	}, [t]);
+
+	const onCopyVerification = useCallback(() => {
+		// TODO: implement in calling app if needed
+		message.success(t("Verification link copied"));
+	}, [t]);
+
+	const onResetPassword = useCallback(
+		async (email) => {
+			Modal.confirm({
+				title: t("Send password reset link?"),
+				content: t("Are you sure you want to send password reset link to this user?"),
+				okText: t("Yes"),
+				cancelText: t("No"),
+				onOk: async () => {
+					try {
+						await AuthenticationService.resetPasswordRequest({ email });
+						message.success(t("Password reset link sent to user"));
+					} catch (err) {
+						handleError(err);
+					}
+				},
+			});
+		},
+		[AuthenticationService, t, handleError]
+	);
+
+	function getUsers(params) {
+		return AdminService.getUsers(params);
+	}
+
+	function getAccounts(params) {
+		return AdminService.getAccounts(params);
+	}
+
+	return (
+		<UserTable
+			t={t}
+			goTo={goTo}
+			getRedirectLink={getRedirectLink}
+			location={location}
+			module={module}
+			headerTitle="users"
+			getData={getUsers}
+			getAccounts={getAccounts}
+			isMobile={isMobile}
+			config={{
+				userRoles,
+				accountTypes,
+				tableOnClick: {
+					onResendVerification,
+					onCopyVerification,
+					onImpersonate,
+					onResetPassword,
+				},
+			}}
+		/>
+	);
+}
+

package/src/@daf/core/components/Screens/Admin/AdminScreens/index.js

@@ -0,0 +1,11 @@
+/**
+ * Admin Screens - Ready-to-use route components
+ * These components wrap the base admin components and provide
+ * a consistent interface that can be configured per application
+ */
+
+export { default as AdminDashboardScreen } from "./Dashboard.jsx";
+export { default as AdminUsersScreen } from "./Users.jsx";
+export { default as AdminAccountsScreen } from "./Accounts.jsx";
+export { default as AdminAccountsViewScreen } from "./AccountsView.jsx";
+