datastake-daf 0.6.501 → 0.6.503

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

@@ -0,0 +1,208 @@
+/* eslint-disable react/prop-types */
+import React, { useCallback, useMemo } from "react";
+import SidenavMenu from "../../../../core/components/Sidenav/Menu.jsx";
+import { formatClassname } from '../../../../../helpers/ClassesHelper.js';
+import { renderModule } from "../Sidenav";
+import { Style } from "./style";
+
+const isCollapsed = false;
+const selectedKeys = [];
+
+export default function MobileDrawer({
+  mod = 'pme',
+  toggle = () => { },
+  drawerOpened = false,
+  isUserDropdown = false,
+  user,
+  sidenavConfig = {},
+  navigate,
+  t = (key) => key,
+  checkPermission = () => false,
+  logOut,
+  changeNotificationState,
+  matchPath,
+  appName = 'app',
+  userHelpers = {},
+  isDev = false,
+  selectedProject,
+}) {
+  const items = useMemo(() => sidenavConfig[mod] || [], [sidenavConfig, mod]);
+  
+  const canViewPartners = useMemo(() => mod === 'tazama', [mod]);
+  const canViewProjects = checkPermission({ 
+    permission: 'projects.canView', 
+    permissions: user?.role?.permissions 
+  });
+  const canViewUsers = checkPermission({ 
+    permission: 'users.canView', 
+    permissions: user?.role?.permissions 
+  });
+  const canViewSettings = checkPermission({ 
+    permission: 'settings.canView', 
+    permissions: user?.role?.permissions 
+  });
+  
+  const hasMultipleApps = useMemo(() =>
+    Object.keys(user?.modules || {}).filter((k) => user.modules[k].status === 'approved').length > 1, 
+    [user]
+  );
+
+  const handleLogOut = useCallback(() => {
+    const hasPrevious = (localStorage.getItem('previous'));
+    sessionStorage.removeItem('notifications');
+    if (hasPrevious) {
+      logOut?.({ isImpersonation: true });
+      return;
+    }
+    logOut?.();
+  }, [logOut]);
+
+  const goTo = (...props) => {
+    navigate?.(...props);
+    toggle();
+  };
+
+  const filteredItems = useMemo(() => {
+    const mapItems = (item) => {
+      const isDisabled = typeof item.isDisabled === 'function' ?
+        item.isDisabled(user, selectedProject, selectedProject)
+        : item.isDisabled || false;
+
+      if (item.items) {
+        return {
+          ...item, 
+          isDisabled, 
+          items: item.items.filter((item) => {
+            const res = typeof item.visible === 'function' ? 
+              item.visible(user, selectedProject, selectedProject) : true;
+            return res;
+          }).map(mapItems)
+        };
+      }
+
+      return { ...item, isDisabled };
+    };
+
+    if (isUserDropdown) {
+      return [
+        { 
+          type: 'link', 
+          name: t('Projects'), 
+          path: `/app/${mod}/projects`, 
+          isDashboard: true, 
+          visible: canViewProjects 
+        },
+        { 
+          type: 'link', 
+          name: t('Partners'), 
+          path: `/app/${mod}/partners`, 
+          isDashboard: true, 
+          visible: canViewPartners 
+        },
+        { 
+          type: 'link', 
+          name: t('Users'), 
+          path: `/app/users`, 
+          isDashboard: true, 
+          visible: canViewUsers 
+        },
+        { 
+          type: 'link', 
+          name: t('Settings'), 
+          path: `/app/${mod}/view/settings`, 
+          isDashboard: true, 
+          visible: canViewSettings 
+        },
+        { 
+          type: 'link', 
+          name: t('Log out'), 
+          onClick: () => handleLogOut(), 
+          isDashboard: true, 
+          visible: true 
+        },
+      ]
+        .filter((v) => v.visible)
+        .map(mapItems);
+    }
+
+    return items
+      .filter(item => {
+        const res = typeof item.visible === 'function' ? 
+          item.visible(user, selectedProject, selectedProject) : true;
+        return res;
+      })
+      .map(mapItems);
+  }, [
+    items, 
+    user, 
+    selectedProject, 
+    t, 
+    isUserDropdown, 
+    mod, 
+    handleLogOut, 
+    hasMultipleApps, 
+    canViewPartners, 
+    canViewUsers, 
+    canViewSettings, 
+    canViewProjects
+  ]);
+
+  const checkOnClick = ({ event }) => {
+    changeNotificationState({
+      onYes: () => {
+        event();
+      }
+    });
+  };
+
+  return (
+    <Style className={formatClassname([!drawerOpened && 'closed', isUserDropdown && 'user-dropdown'])}>
+      <div className="drawer">
+        <div
+          className={formatClassname([
+            isCollapsed ? 'sidenav-sider-collapsed sidenav-sider flex-1' : 'sidenav-sider sidenav-sider-opened flex-1', 
+            appName
+          ])}
+          style={{ width: isCollapsed ? '70px' : '250px', minWidth: isCollapsed ? 'auto' : '250px' }}
+        >
+          <div className="flex">
+            <div className="flex-1">
+              {mod === 'app' || !user ? null : renderModule({
+                isCollapsed,
+                mod: mod,
+                module: mod,
+                user,
+                userHelpers
+              })}
+            </div>
+            <div className="cursor-pointer close-icon" onClick={toggle}>
+            </div>
+          </div>
+          <div className="sidenav-cont">
+            <div className={formatClassname(['drawer', 'menus-cont', 'not-collapsed'])}>
+              <SidenavMenu
+                module={mod}
+                menuMode="inline"
+                selectedKeys={selectedKeys}
+                filteredItems={filteredItems}
+                isCollapsed={false}
+                setHoverItem={() => { }}
+                setTopHover={() => { }}
+                setHoverOpen={() => { }}
+                onMouseMove={() => { }}
+                user={user}
+                goTo={goTo}
+                isDev={isDev}
+                showSettings
+                t={t}
+                checkOnClick={checkOnClick}
+                project={selectedProject}
+                matchPath={matchPath}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Style>
+  );
+}

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

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+
+export const Style = styled.div`
+  position: fixed;
+  background: rgba(0, 0, 0, 0.4);
+  width: 100dvw;
+  height: calc(100dvh - 64px);
+  top: 64px;
+  left: 0px;
+  z-index: 1001;
+  display: flex;
+  flex-direction: row;
+  animation: .4s fadeIn forwards;
+
+  &.user-dropdown {
+    justify-content: flex-end;
+  }
+
+  div {
+    line-height: 0px;
+  }
+
+  .sidenav-sider {
+    display: flex;
+    flex-direction: column;
+    
+    .anticon {
+      line-height: 0px !important;
+    }
+
+    span[role="img"] {
+      padding: 0;
+    }
+
+    .close-icon {
+      margin-top: 20px;
+    }
+
+    .mod-name {
+      margin-bottom: 20px;
+      margin-top: 20px;
+    }
+  }
+
+  .drawer {
+    width: 250px;
+    transition: .4s margin-right;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .sidenav-cont {
+      svg {
+        margin-right: 0px;
+      }
+      
+      span {
+        padding-left: 0px;
+      }
+
+      height: unset;
+      flex: 1;
+      overflow-y: auto;
+      max-height: calc(100dvh - 125px);
+
+      .log-out {
+        padding-top: var(--size-lg);
+        margin: 0px var(--size-lg);
+        cursor: pointer;
+
+        span {
+          padding-left: 10px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  &.closed {
+    display: none;
+  }
+`;

package/src/@daf/layouts/AppLayout/components/Notifications/Notification/index.js

@@ -0,0 +1,31 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { formatClassname } from "../../../../../../helpers/ClassesHelper.js";
+import { useNotificationsContext } from "../context";
+
+export const Notification = ({ 
+  n, 
+  toggle = () => {},
+  t = (key) => key,
+  navigate,
+}) => {
+  const { removeNotification } = useNotificationsContext();
+
+  const handleClick = () => {
+    if (n.data?.link) {
+      removeNotification(n.id);
+      toggle();
+      navigate?.(n.data.link);
+    }
+  };
+
+  return (
+    <div 
+      className={formatClassname(['noti', n.data?.link && 'clickable'])}
+      onClick={handleClick}
+    >
+      <strong>{n.title || t('Notification')}</strong>
+      <div>{n.body}</div>
+    </div>
+  );
+};

package/src/@daf/layouts/AppLayout/components/Notifications/NotificationHistory/index.js

@@ -0,0 +1,22 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { Modal } from "antd";
+
+export default function NotificationHistory({ 
+  visible, 
+  setHistoryVisible,
+  t = (key) => key,
+}) {
+  return (
+    <Modal
+      open={visible}
+      onCancel={() => setHistoryVisible(false)}
+      footer={null}
+      title={t('Notification History')}
+    >
+      <div style={{ padding: '20px' }}>
+        {t('Notification history content will appear here')}
+      </div>
+    </Modal>
+  );
+}

package/src/@daf/layouts/AppLayout/components/Notifications/context/index.js

@@ -0,0 +1,79 @@
+/* eslint-disable react/prop-types */
+import moment from "moment";
+import React, { createContext, useContext, useCallback } from "react";
+import useNotifications from "../useNotifications.js";
+
+const status = 'unread';
+
+export const NotificationsContext = createContext({
+  loading: false,
+  _notifications: [],
+  _fetch: () => {},
+  total: 0,
+  clearAll: () => { },
+  removeNotification: () => { },
+});
+
+export const NotificationsProvider = ({ 
+  children, 
+  user,
+  notificationHandlers = {},
+  NotificationsHistoryProvider,
+  firebaseEnabled = true,
+  useFirebaseHook,
+}) => {
+  const {
+    loading,
+    _notifications,
+    _fetch,
+    total,
+    addNotification,
+    clearAll,
+    removeNotification,
+  } = useNotifications({ status, user, ...notificationHandlers });
+
+  const value = {
+    loading,
+    _notifications,
+    _fetch,
+    total,
+    clearAll,
+    removeNotification,
+  };
+
+  const onMessage = useCallback((notification) => {
+    let data = {};
+
+    try {
+      data = JSON.parse(notification.data?.data);
+    } catch (err) {
+      console.log(err);
+    }
+
+    addNotification({
+      id: notification.messageId,
+      type: notification.data?.type,
+      title: notification.notification?.title,
+      body: notification.notification?.body,
+      createdAt: moment().toString(),
+      data: data,
+      read: false,
+    });
+  }, [addNotification]);
+
+  // Only use Firebase if enabled and hook provided
+  if (firebaseEnabled && useFirebaseHook) {
+    useFirebaseHook(onMessage);
+  }
+
+  return (
+    <NotificationsContext.Provider value={value}>
+      {children}
+    </NotificationsContext.Provider>
+  );
+};
+
+export const useNotificationsContext = () => {
+  const value = useContext(NotificationsContext);
+  return value;
+};

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

@@ -0,0 +1,106 @@
+/* eslint-disable react/prop-types */
+import { Dropdown } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import React, { useState } from "react";
+import CustomIcon from '../../../../core/components/Icon/CustomIcon.jsx';
+import { NotificationsStyle } from './style';
+import { useNotificationsContext } from "./context";
+import { Notification } from "./Notification";
+import NotificationHistory from "./NotificationHistory";
+import { formatClassname } from "../../../../../helpers/ClassesHelper.js";
+
+export default function Notifications({
+  mod = 'pme',
+  toggle = () => { },
+  t = (key) => key,
+  navigate,
+  appName = 'app',
+}) {
+  const [historyVisible, setHistoryVisible] = useState(false);
+  const { loading, _notifications, _fetch, total, clearAll } = useNotificationsContext();
+
+  const items = [
+    {
+      key: "details",
+      icon: <CustomIcon name="CheckDone" width={13} height={13} />,
+      disabled: !total,
+      onClick: () => {
+        clearAll();
+        toggle();
+      },
+      label: t('Clear All'),
+    },
+    {
+      key: "publish",
+      icon: <CustomIcon name="NotificationText" width={13} height={13} />,
+      onClick: () => {
+        toggle();
+        setHistoryVisible(true);
+      },
+      label: t('View All'),
+    },
+    {
+      key: "dashboard",
+      icon: <CustomIcon name="Settings" width={13} height={13} />,
+      onClick: () => {
+        toggle();
+        navigate?.(`/app/${mod}/view/settings?activeForm=notifications`);
+      },
+      label: t('Settings'),
+    },
+  ];
+
+  return (
+    <NotificationsStyle className={appName}>
+      <div className="notis-title">
+        <h3>{t('sbg::notification')}</h3>
+        <Dropdown
+          menu={{ items }}
+          trigger="click"
+          rootClassName={formatClassname(['dark-menu', appName])}
+        >
+          <div className="cursor-pointer">
+            <CustomIcon name="MoreCustom" width={3} height={13} />
+          </div>
+        </Dropdown>
+      </div>
+      <div
+        className="notis-list"
+        onScroll={(e) => {
+          const _t = e.target;
+          const canFetch = (_t.scrollTop + _t.clientHeight) >= _t.scrollHeight - 200;
+
+          if (canFetch) {
+            _fetch();
+          }
+        }}
+      >
+        {!loading && !total ? (
+          <div className="no-notis">
+            {t('No new notifications')}
+          </div>
+        ) : null}
+        {_notifications.map((n, i) => (
+          <Notification
+            toggle={toggle}
+            key={`notifications-${i + 1}`}
+            n={n}
+            t={t}
+            navigate={navigate}
+          />
+        ))}
+        {loading && (
+          <div className="loading-cont">
+            <LoadingOutlined />
+          </div>
+        )}
+      </div>
+      <NotificationHistory 
+        visible={historyVisible} 
+        setHistoryVisible={setHistoryVisible}
+        t={t}
+        navigate={navigate}
+      />
+    </NotificationsStyle>
+  );
+}

package/src/@daf/layouts/AppLayout/components/Notifications/style.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const NotificationsStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  .notis-list {
+    max-height: 40vh;
+    overflow-y: auto;
+    padding: 0px var(--size-lg) var(--size-lg) var(--size-lg);
+  }
+  
+  .notis-title {
+    display: flex;
+    color: white;
+    padding: var(--size-lg) var(--size-lg) 0 var(--size-lg);
+    margin-bottom: 8px;
+
+    h3 {
+      color: white;
+      font-size: 18px;
+      flex: 1;
+      margin-bottom: 0px;
+    }
+  }
+
+  .noti {
+    white-space: wrap;
+    padding: var(--size) 0px;
+    transition: 0.4s background;
+    user-select: none;
+    color: white;
+    border-bottom: 1px solid #384250;
+
+    &:last-of-type {
+      padding-bottom: 0px;
+      border-bottom: 0px;
+    }
+
+    strong {
+      color: white;
+    }
+
+    &.clickable {
+      cursor: pointer;
+    }
+  }
+
+  .no-notis {
+    color: white;
+    text-align: center;
+    padding: var(--size-lg) 0;
+  }
+
+  .loading-cont {
+    display: flex;
+    justify-content: center;
+    padding: var(--size-lg) 0;
+    color: white;
+  }
+`;

package/src/@daf/layouts/AppLayout/components/Notifications/useNotifications.js

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+const useNotifications = ({ 
+  status = 'unread',
+  user,
+  fetchNotifications,
+  markAsRead,
+  markAllAsRead,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [notifications, setNotifications] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const isFetching = useRef(false);
+
+  const _notifications = useMemo(() => {
+    return notifications.filter((n) => !n.read);
+  }, [notifications]);
+
+  const _fetch = useCallback(async () => {
+    if (!fetchNotifications || isFetching.current || !hasMore || loading) {
+      return;
+    }
+
+    try {
+      isFetching.current = true;
+      setLoading(true);
+      
+      const response = await fetchNotifications({
+        page: page + 1,
+        status,
+        limit: 20,
+      });
+
+      const newNotifications = response.data || [];
+      
+      if (newNotifications.length === 0) {
+        setHasMore(false);
+      } else {
+        setNotifications((prev) => [...prev, ...newNotifications]);
+        setPage((p) => p + 1);
+      }
+
+      setTotal(response.total || 0);
+    } catch (err) {
+      console.error('Error fetching notifications:', err);
+    } finally {
+      setLoading(false);
+      isFetching.current = false;
+    }
+  }, [fetchNotifications, page, status, hasMore, loading]);
+
+  const removeNotification = useCallback(async (id) => {
+    try {
+      if (markAsRead) {
+        await markAsRead(id);
+      }
+      
+      setNotifications((prev) => 
+        prev.map((n) => n.id === id ? { ...n, read: true } : n)
+      );
+      setTotal((t) => Math.max(0, t - 1));
+    } catch (err) {
+      console.error('Error removing notification:', err);
+    }
+  }, [markAsRead]);
+
+  const clearAll = useCallback(async () => {
+    try {
+      if (markAllAsRead) {
+        await markAllAsRead();
+      }
+      
+      setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
+      setTotal(0);
+    } catch (err) {
+      console.error('Error clearing notifications:', err);
+    }
+  }, [markAllAsRead]);
+
+  const addNotification = useCallback((notification) => {
+    setNotifications((prev) => [notification, ...prev]);
+    setTotal((t) => t + 1);
+  }, []);
+
+  // Initial fetch
+  useEffect(() => {
+    if (user) {
+      _fetch();
+    }
+  }, [user]);
+
+  return {
+    loading,
+    _notifications,
+    _fetch,
+    total,
+    clearAll,
+    removeNotification,
+    addNotification,
+  };
+};
+
+export default useNotifications;