datastake-daf 0.6.501 → 0.6.503

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

@@ -0,0 +1,384 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect, useMemo } from "react";
+import { useResizeContext } from "../../core/context/Resize/index.js";
+import { useForms } from "../../core/context/Forms/index.js";
+import { formatClassname } from '../../../helpers/ClassesHelper.js';
+import { Layout, Select } from 'antd';
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  MenuOutlined,
+} from '@ant-design/icons';
+import Sidenav from "./components/Sidenav/index.js";
+import { UserDropdownMenu } from "./components/UserDropdown/index.js";
+import MobileDrawer from "./components/MobileDrawer/index.js";
+import Notifications from "./components/Notifications/index.js";
+import LoginPopup from "./components/LoginPopup/index.js";
+import { NotificationsProvider } from "./components/Notifications/context/index.js";
+import './index.scss';
+
+const { Content } = Layout;
+
+/**
+ * AppLayout Component
+ * 
+ * This component provides a complete layout structure with:
+ * - Collapsible sidebar navigation
+ * - Header with language selector, notifications, and user menu
+ * - Mobile responsive drawer
+ * - Login session management
+ * 
+ * @param {Object} props
+ * @param {Object} props.user - Current user object
+ * @param {string} props.module - Current module/app name (e.g., 'sbg', 'pme')
+ * @param {Function} props.logout - Logout function
+ * @param {Function} props.exitImpersonation - Exit impersonation function
+ * @param {Function} props.updateLanguage - Language update callback
+ * @param {Function} props.getUserOptions - Get user options callback
+ * @param {Function} props.onCollapse - Callback when sidebar collapses
+ * @param {React.ReactNode} props.children - Child components to render
+ * @param {Function} props.navigate - Navigation function (from react-router-dom)
+ * @param {Function} props.t - Translation function (from react-i18next)
+ * @param {Object} props.location - Location object (from react-router-dom)
+ * @param {Function} props.matchPath - Match path function (from react-router-dom)
+ * @param {Function} props.Outlet - Outlet component (from react-router-dom)
+ * @param {Object} props.sidenavConfig - Sidebar navigation configuration
+ * @param {Object} props.permissions - User permissions object
+ * @param {Object} props.generalContext - General app context
+ * @param {Function} props.getUserPreference - Function to fetch user preferences
+ * @param {Object} props.notificationHandlers - Notification-related handlers
+ * @param {string} props.appName - Application name/identifier
+ * @param {Object} props.appLogos - Logo URLs { collapsed, expanded }
+ * @param {Object} props.languageConfig - Language selector configuration
+ * @param {Function} props.renderChildren - Custom render function for children
+ */
+function AppLayout({
+  // User & Auth
+  user,
+  module,
+  logout,
+  exitImpersonation,
+  updateLanguage,
+  getUserOptions,
+  
+  // Navigation (injected from app)
+  navigate,
+  location,
+  matchPath,
+  Outlet,
+  
+  // i18n (injected from app)
+  t = (key) => key,
+  
+  // Permissions (injected from app)
+  permissions = {},
+  checkPermission = () => false,
+  
+  // General Context (injected from app)
+  generalContext = {},
+  
+  // Services (injected from app)
+  getUserPreference,
+  
+  // Notifications (injected from app)
+  notificationHandlers = {},
+  NotificationsHistoryProvider,
+  
+  // Config
+  sidenavConfig = {},
+  appName = 'app',
+  appLogos = {
+    collapsed: '/assets/images/logo-small.svg',
+    expanded: '/assets/images/logo.svg'
+  },
+  languageConfig = [
+    { value: "en", label: "EN", flagUrl: "/assets/images/countries/gb.png" },
+    { value: "fr", label: "FR", flagUrl: "/assets/images/countries/fr.png" },
+    { value: "sp", label: "ES", flagUrl: "/assets/images/countries/sp.png" }
+  ],
+  
+  // Callbacks
+  onCollapse = () => { },
+  
+  // Custom renderers
+  renderChildren,
+  
+  // Children
+  children,
+}) {
+  const { notificationMode, changeNotificationState } = useForms();
+  const [userPreferences, setUserPreferences] = useState(null);
+  const isAppNavigation = module === 'app';
+  const [drawerOpened, setDrawerOpened] = useState(false);
+  const [settingsDrawerOpened, setSettingsDrawerOpened] = useState(false);
+  const { isCollapsed, setIsCollapsed } = useResizeContext();
+  const [hasPrevious, setPrevious] = useState(false);
+  const { logOutPopupVisible = false } = generalContext;
+
+  const canViewNotifications = checkPermission({ 
+    permission: 'notifications.canView',
+    permissions: user?.role?.permissions 
+  }) && !isAppNavigation;
+
+  useEffect(() => {
+    const _fetchPreferences = async () => {
+      try {
+        if (getUserPreference) {
+          const { data } = await getUserPreference();
+          setUserPreferences(data);
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    };
+
+    _fetchPreferences();
+  }, [getUserPreference]);
+
+  const setIsCollapse = (val = false) => {
+    localStorage.setItem('is_collapsed', val ? 'true' : 'false');
+    setIsCollapsed(val);
+  };
+
+  const logOut = () => {
+    sessionStorage.removeItem('notifications');
+    if (hasPrevious) {
+      exitImpersonation?.();
+      return;
+    }
+    logout?.();
+  };
+
+  const isUserApproved = user?.modules && 
+    user?.modules[module] && 
+    user?.modules[module].status === 'approved';
+
+  useEffect(() => {
+    if (localStorage.getItem('previous')) {
+      setPrevious(true);
+    }
+  }, [user?.language]);
+
+  useEffect(() => {
+    if (getUserOptions) {
+      getUserOptions(user?.language);
+    }
+  }, [user?.language, getUserOptions]);
+
+  const collapsedAppLogo = useMemo(() => appLogos.collapsed, [appLogos]);
+  const appLogo = useMemo(() => {
+    return isCollapsed ? collapsedAppLogo : appLogos.expanded;
+  }, [isCollapsed, collapsedAppLogo, appLogos]);
+
+  const toggleSettingsDrawer = () => {
+    if (!settingsDrawerOpened) {
+      setDrawerOpened(false);
+      setSettingsDrawerOpened(true);
+      return;
+    }
+    setSettingsDrawerOpened(false);
+  };
+
+  const toggleDrawer = () => {
+    if (!drawerOpened) {
+      setSettingsDrawerOpened(false);
+      setDrawerOpened(true);
+      return;
+    }
+    setDrawerOpened(false);
+  };
+
+  const handleLogoClick = () => {
+    if (Object.keys(user?.modules || {}).length <= 1) {
+      return;
+    }
+    changeNotificationState({ onYes: () => navigate?.('/app') });
+  };
+
+  return (
+    <div 
+      style={{ 
+        display: 'flex', 
+        flexDirection: 'row', 
+        width: '100vw', 
+        height: '100dvh', 
+        maxHeight: '100dvh' 
+      }} 
+      className="components-layout"
+    >
+      {!isAppNavigation ? (
+        <div
+          className={formatClassname([
+            isCollapsed ? 'sidenav-sider-collapsed sidenav-sider desktop-sider' : 'sidenav-sider sidenav-sider-opened desktop-sider',
+            appName
+          ])}
+          style={{ 
+            width: isCollapsed ? '70px' : '250px', 
+            minWidth: isCollapsed ? 'auto' : '250px' 
+          }}
+        >
+          <div className="logo">
+            <img
+              src={appLogo}
+              onClick={handleLogoClick}
+              alt="logo"
+              className={appName}
+            />
+          </div>
+          <Sidenav 
+            showMenu 
+            module={module}
+            isCollapsed={isCollapsed}
+            user={user}
+            sidenavConfig={sidenavConfig}
+            navigate={navigate}
+            location={location}
+            matchPath={matchPath}
+            t={t}
+            changeNotificationState={changeNotificationState}
+            checkPermission={checkPermission}
+            appName={appName}
+          />
+        </div>
+      ) : null}
+
+      <div style={{ width: '100%', minHeight: '100dvh' }}>
+        <header 
+          style={{ padding: 0 }}
+          className={formatClassname([
+            "site-layout-sub-header-background text-white d-flex justify-content-between",
+            !isCollapsed && 'header-collapsed',
+            'layout-header',
+            appName
+          ])}
+        >
+          <div className="d-flex left-sidebar right-sidebar">
+            <div className="desktop">
+              {isAppNavigation ? null : React.createElement(
+                isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
+                {
+                  className: 'trigger',
+                  onClick: () => {
+                    setIsCollapse(!isCollapsed);
+                    onCollapse(!isCollapsed);
+                  },
+                }
+              )}
+            </div>
+            <div className="mobile" onClick={toggleDrawer}>
+              <img src={collapsedAppLogo} alt="logo" />
+            </div>
+            <div className="mobile cursor-pointer pl-0" onClick={toggleDrawer}>
+              {module !== 'app' ? (
+                <MenuOutlined className="mobile-burger" />
+              ) : null}
+            </div>
+          </div>
+          
+          <div className="d-flex right-sidebar">
+            {canViewNotifications ? (
+              <NotificationsProvider
+                user={user}
+                notificationHandlers={notificationHandlers}
+                NotificationsHistoryProvider={NotificationsHistoryProvider}
+              >
+                <NotificationsHistoryProvider>
+                  <Notifications
+                    userPreferences={userPreferences}
+                    module={module}
+                    t={t}
+                    navigate={navigate}
+                    appName={appName}
+                  />
+                </NotificationsHistoryProvider>
+              </NotificationsProvider>
+            ) : <div className="notification-icon" />}
+            
+            <div className="flex flex-column">
+              <Select
+                className="ln-22 dark-select language-select"
+                style={{ color: 'white', height: '30px' }}
+                defaultValue={localStorage.getItem('datastakeLng') || 'en'}
+                bordered={false}
+                onChange={lng => updateLanguage?.(lng)}
+                popupClassName={formatClassname(['dark-select-popup language-select', appName])}
+              >
+                {languageConfig.map(lang => (
+                  <Select.Option key={lang.value} value={lang.value}>
+                    <div className="row-cont flex">
+                      <div className="cont mr-2">
+                        <img 
+                          src={lang.flagUrl} 
+                          alt={lang.label} 
+                          style={{ width: 20, height: 12 }} 
+                        />
+                      </div>
+                      <div className="cont">
+                        {lang.label}
+                      </div>
+                    </div>
+                  </Select.Option>
+                ))}
+              </Select>
+            </div>
+            
+            <div className="user-details d-flex">
+              <UserDropdownMenu
+                module={module}
+                user={user}
+                toggleSettingsDrawer={toggleSettingsDrawer}
+                settingsDrawerOpened={settingsDrawerOpened}
+                notificationMode={notificationMode}
+                isAppNavigation={isAppNavigation}
+                navigate={navigate}
+                changeNotificationState={changeNotificationState}
+                isUserApproved={isUserApproved}
+                t={t}
+                logOut={logOut}
+                checkPermission={checkPermission}
+                appName={appName}
+              />
+            </div>
+          </div>
+        </header>
+        
+        <Content 
+          className={formatClassname(["bg-white", "layout-children"])} 
+          style={{ position: 'relative' }}
+        >
+          {renderChildren ? renderChildren() : (children || (Outlet && <Outlet />))}
+        </Content>
+        
+        {module !== 'app' ? (
+          <MobileDrawer 
+            mod={module}
+            toggle={toggleDrawer}
+            drawerOpened={drawerOpened}
+            user={user}
+            sidenavConfig={sidenavConfig}
+            navigate={navigate}
+            t={t}
+            checkPermission={checkPermission}
+            logOut={logOut}
+            changeNotificationState={changeNotificationState}
+            matchPath={matchPath}
+            appName={appName}
+          />
+        ) : null}
+
+        {logOutPopupVisible ? (
+          <LoginPopup 
+            user={user}
+            t={t}
+            login={notificationHandlers.login}
+            loggingIn={notificationHandlers.loggingIn}
+            setLogOutPopupVisible={generalContext.setLogOutPopupVisible}
+            firebaseToken={notificationHandlers.firebaseToken}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default AppLayout;

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

@@ -0,0 +1,5 @@
+@import './styles/variables.scss';
+@import './styles/layout.scss';
+@import './styles/header.scss';
+@import './styles/sidebar.scss';
+@import './styles/responsive.scss';

package/src/@daf/layouts/AppLayout/styles/header.scss

@@ -0,0 +1,257 @@
+@import './variables';
+
+.layout-header {
+  background: $primary-bg;
+  height: $header-height;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: $z-header;
+  position: relative;
+
+  .left-sidebar,
+  .right-sidebar {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .left-sidebar {
+    flex: 1;
+  }
+
+  // Collapse trigger
+  .trigger {
+    font-size: 18px;
+    line-height: $header-height;
+    padding: 0 24px;
+    margin: 0 -24px 0 0;
+    cursor: pointer;
+    transition: color $transition-speed;
+    color: $text-primary;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  // Desktop/Mobile visibility
+  .desktop {
+    display: flex;
+
+    @media (max-width: $mobile-breakpoint) {
+      display: none;
+    }
+  }
+
+  .mobile {
+    display: none;
+
+    @media (max-width: $mobile-breakpoint) {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    img {
+      height: 32px;
+      width: auto;
+    }
+
+    .mobile-burger {
+      font-size: 20px;
+      color: $text-primary;
+    }
+  }
+
+  // Notification icon
+  .notification-icon {
+    position: relative;
+    cursor: pointer;
+    padding: 8px;
+    color: $text-primary;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    transition: color $transition-speed;
+
+    &:hover {
+      color: #1890ff;
+    }
+
+    .noti-loader {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      width: 8px;
+      height: 8px;
+      background: #52c41a;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+
+    .noti-more-cont {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      background: #ff4d4f;
+      color: white;
+      border-radius: 10px;
+      padding: 2px 6px;
+      font-size: 12px;
+      min-width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+    }
+  }
+
+  // Language selector
+  .language-select {
+    min-width: 100px;
+
+    .ant-select-selector {
+      background: transparent !important;
+      border: none !important;
+      color: $text-primary !important;
+      box-shadow: none !important;
+    }
+
+    .ant-select-arrow {
+      color: $text-primary;
+    }
+
+    .row-cont {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  .user-details {
+    display: flex;
+    align-items: center;
+  }
+}
+
+// Dark select popup
+.dark-select-popup {
+  &.ant-select-dropdown {
+    background: $primary-bg;
+
+    .ant-select-item {
+      color: $text-primary;
+
+      &:hover {
+        background: $hover-bg;
+      }
+
+      &-option-selected {
+        background: $hover-bg;
+      }
+    }
+  }
+}
+
+// User dropdown
+.user-dropdown-layout {
+  &.ant-dropdown {
+    .ant-dropdown-menu {
+      padding: 0;
+      min-width: 200px;
+
+      .ant-dropdown-menu-item {
+        padding: 0;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+  }
+
+  .drop-header {
+    padding: 16px;
+    border-bottom: 1px solid #f0f0f0;
+
+    h4 {
+      margin: 0 0 4px 0;
+      font-weight: 600;
+      font-size: 14px;
+      color: #262626;
+    }
+
+    p {
+      margin: 0;
+      color: $text-secondary;
+      font-size: 12px;
+    }
+  }
+
+  .list {
+    padding: 8px 0;
+
+    .list-item {
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: background $transition-speed;
+      color: #262626;
+      font-size: 14px;
+
+      &:hover {
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+
+// Dark menu
+.dark-menu {
+  &.ant-dropdown {
+    .ant-dropdown-menu {
+      background: $primary-bg;
+      padding: 4px 0;
+
+      .ant-dropdown-menu-item {
+        color: $text-primary;
+        padding: 8px 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        &:hover {
+          background: $hover-bg;
+        }
+
+        &-disabled {
+          color: rgba(255, 255, 255, 0.3);
+          cursor: not-allowed;
+
+          &:hover {
+            background: transparent;
+          }
+        }
+
+        .anticon {
+          color: $text-primary;
+        }
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(82, 196, 26, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
+  }
+}

package/src/@daf/layouts/AppLayout/styles/layout.scss

@@ -0,0 +1,76 @@
+@import './variables';
+
+.components-layout {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
+
+  .layout-content-wrapper {
+    width: 100%;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.layout-children {
+  flex: 1;
+  min-height: calc(100vh - $header-height);
+  overflow-y: auto;
+  padding: 24px;
+  background: #ffffff;
+  position: relative;
+
+  @media (max-width: $mobile-breakpoint) {
+    padding: 16px;
+  }
+}
+
+// Module name section
+.mod-name {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid $border-color;
+  color: $text-primary;
+  cursor: pointer;
+  transition: all $transition-speed;
+
+  &:hover {
+    background: $hover-bg;
+  }
+
+  &.is-collapsed {
+    justify-content: center;
+    padding: 20px 10px;
+
+    h1 {
+      display: none;
+    }
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+
+    svg, img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.2;
+  }
+}