datastake-daf 0.6.501 → 0.6.503

package/src/@daf/layouts/AppLayout/AppLayout.stories.js

@@ -0,0 +1,532 @@
+import React from "react";
+import AppLayout from "./index.jsx";
+import ThemeLayout from "../../core/components/ThemeLayout/index.jsx";
+import { FormsProvider } from "../../core/context/Forms/index.js";
+import { ResizeProvider } from "../../core/context/Resize/index.js";
+import { GeneralProvider } from "../../core/context/General/index.js";
+
+// Mock data
+const mockUser = {
+  id: "user-1",
+  email: "john.doe@example.com",
+  firstName: "John",
+  lastName: "Doe",
+  language: "en",
+  role: {
+    id: "EDITOR",
+    name: "Editor",
+    permissions: {
+      "dashboard.canView": true,
+      "notifications.canView": true,
+      "users.canView": true,
+      "settings.canView": true,
+      "projects.canView": true,
+    }
+  },
+  company: {
+    id: "company-1",
+    name: "Acme Corporation",
+    logo: [],
+    apps: [],
+    modules: [
+      { id: "sbg", status: "approved", role: "editor" }
+    ]
+  },
+  modules: {
+    sbg: { status: "approved", role: "editor" }
+  }
+};
+
+const mockAdminUser = {
+  ...mockUser,
+  role: {
+    id: "APP_ADMIN",
+    name: "Admin",
+    permissions: {
+      "dashboard.canView": true,
+      "notifications.canView": true,
+      "users.canView": true,
+      "settings.canView": true,
+      "projects.canView": true,
+    }
+  }
+};
+
+// Mock navigation
+const mockNavigate = (path) => {
+  console.log("Navigate to:", path);
+  alert(`Navigating to: ${path}`);
+};
+
+const mockLocation = {
+  pathname: "/app/sbg/dashboard",
+  search: "",
+  hash: "",
+  state: null
+};
+
+const mockMatchPath = (pattern, pathname) => {
+  console.log("Matching path:", pattern, pathname);
+  return pathname.includes(pattern.path);
+};
+
+// Mock Outlet component
+const MockOutlet = () => (
+  <div style={{ padding: "20px", minHeight: "500px" }}>
+    <h1>Dashboard Content</h1>
+    <p>This is where your page content would appear.</p>
+    <div style={{ 
+      background: "#f5f5f5", 
+      padding: "20px", 
+      borderRadius: "8px",
+      marginTop: "20px" 
+    }}>
+      <h2>Sample Content</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+  </div>
+);
+
+// Mock translation function
+const mockT = (key) => {
+  const translations = {
+    "Users": "Users",
+    "Settings": "Settings",
+    "Log out": "Log out",
+    "Projects": "Projects",
+    "Partners": "Partners",
+    "Dashboard": "Dashboard",
+    "sbg::notification": "Notifications",
+    "Clear All": "Clear All",
+    "View All": "View All",
+    "No new notifications": "No new notifications",
+    "Log back in": "Log back in",
+    "You were logged out due to inactivity. Please provide your details.": "You were logged out due to inactivity. Please provide your details.",
+    "Email": "Email",
+    "Password": "Password",
+    "Remember me": "Remember me",
+    "Log in": "Log in",
+    "Logging-in": "Logging in...",
+  };
+  return translations[key] || key;
+};
+
+// Mock sidenav configuration
+const mockSidenavConfig = {
+  sbg: [
+    {
+      name: "Dashboard",
+      icon: "TifDashboard",
+      visible: () => true,
+      path: "/app/sbg/dashboard",
+      isDashboard: true,
+      type: "link",
+    },
+    {
+      name: "Producers",
+      icon: "TifAmp",
+      visible: () => true,
+      path: "/app/registration",
+      isModule: true,
+      type: "link",
+    },
+    {
+      name: "Mines",
+      icon: "MineSite",
+      visible: () => true,
+      path: "/app/mines",
+      isModule: true,
+      type: "link",
+    },
+    {
+      name: "Activities",
+      icon: "Event",
+      visible: () => true,
+      path: "/app/activities",
+      isModule: true,
+      type: "link",
+    },
+    {
+      name: "Documentation",
+      icon: "DashboardDocuments",
+      visible: () => true,
+      path: "/app/documents",
+      isModule: true,
+      type: "link",
+    },
+    {
+      name: "Stakeholders",
+      icon: "DashboardStakeholder",
+      visible: () => true,
+      path: "/app/stakeholders",
+      isModule: true,
+      type: "link",
+    },
+  ]
+};
+
+// Mock permission check function
+const mockCheckPermission = ({ permission, permissions }) => {
+  return permissions?.[permission] || false;
+};
+
+// Mock user helpers
+const mockUserHelpers = {
+  userIsAdmin: (user) => user?.role?.id === "APP_ADMIN",
+  userIsSbgImplementor: (user) => false,
+  userIsSbgPartner: (user) => false,
+};
+
+// Language configuration
+const 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" }
+];
+
+// App logos
+const appLogos = {
+  collapsed: '/assets/sbg-images/sbg-logo-small.svg',
+  expanded: '/assets/sbg-images/sbg-logo.svg'
+};
+
+// Mock notification handlers
+const mockNotificationHandlers = {
+  login: (credentials, callback) => {
+    console.log("Login attempt:", credentials);
+    setTimeout(() => {
+      alert("Login successful!");
+      callback?.();
+    }, 1000);
+  },
+  loggingIn: false,
+  firebaseToken: "mock-firebase-token",
+  fetchNotifications: async ({ page, status, limit }) => {
+    console.log("Fetching notifications:", { page, status, limit });
+    return {
+      data: [
+        {
+          id: "notif-1",
+          title: "New Project",
+          body: "A new project has been assigned to you",
+          createdAt: new Date().toISOString(),
+          read: false,
+          data: { link: "/app/sbg/projects/1" }
+        },
+        {
+          id: "notif-2",
+          title: "Document Updated",
+          body: "Document #123 has been updated",
+          createdAt: new Date().toISOString(),
+          read: false,
+          data: { link: "/app/sbg/documents/123" }
+        }
+      ],
+      total: 2
+    };
+  },
+  markAsRead: async (id) => {
+    console.log("Mark as read:", id);
+  },
+  markAllAsRead: async () => {
+    console.log("Mark all as read");
+  },
+};
+
+// Mock general context
+const mockGeneralContext = {
+  theme: {},
+  ajaxOptions: {},
+  ajaxForms: {},
+  changeAjaxForms: () => {},
+  changeAjaxOptions: () => {},
+  logOutPopupVisible: false,
+  setLogOutPopupVisible: (visible) => console.log("Set logout popup visible:", visible),
+};
+
+// Mock getUserPreference
+const mockGetUserPreference = async () => {
+  return {
+    data: [
+      { key: "notification_steper", value: true }
+    ]
+  };
+};
+
+// Mock NotificationsHistoryProvider
+const MockNotificationsHistoryProvider = ({ children }) => <>{children}</>;
+
+export default {
+  title: "Layouts/AppLayout",
+  component: AppLayout,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ThemeLayout>
+        <GeneralProvider theme={{}}>
+          <ResizeProvider>
+            <FormsProvider t={mockT}>
+              <div style={{ width: "100vw", height: "100vh" }}>
+                <Story />
+              </div>
+            </FormsProvider>
+          </ResizeProvider>
+        </GeneralProvider>
+      </ThemeLayout>
+    ),
+  ],
+  argTypes: {
+    module: {
+      control: "select",
+      options: ["sbg", "app"],
+      description: "Current module/app name",
+    },
+    collapsed: {
+      control: "boolean",
+      description: "Initial collapsed state of sidebar",
+    }
+  }
+};
+
+// Default story
+export const Default = {
+  name: "Default Layout",
+  render: (args) => (
+    <AppLayout
+      // User & Auth
+      user={mockUser}
+      module={args.module || "sbg"}
+      logout={() => console.log("Logout clicked")}
+      exitImpersonation={() => console.log("Exit impersonation")}
+      updateLanguage={(lng) => console.log("Language changed to:", lng)}
+      getUserOptions={(lang) => console.log("Get user options for:", lang)}
+      
+      // Navigation
+      navigate={mockNavigate}
+      location={mockLocation}
+      matchPath={mockMatchPath}
+      Outlet={MockOutlet}
+      
+      // i18n
+      t={mockT}
+      
+      // Permissions
+      checkPermission={mockCheckPermission}
+      
+      // General Context
+      generalContext={mockGeneralContext}
+      
+      // Services
+      getUserPreference={mockGetUserPreference}
+      
+      // Notifications
+      notificationHandlers={mockNotificationHandlers}
+      NotificationsHistoryProvider={MockNotificationsHistoryProvider}
+      
+      // Config
+      sidenavConfig={mockSidenavConfig}
+      appName="sbg"
+      appLogos={appLogos}
+      languageConfig={languageConfig}
+      userHelpers={mockUserHelpers}
+      isDev={true}
+      
+      // Callbacks
+      onCollapse={(collapsed) => console.log("Sidebar collapsed:", collapsed)}
+    />
+  ),
+};
+
+// Admin user story
+export const AdminUser = {
+  name: "Admin User",
+  render: () => (
+    <AppLayout
+      user={mockAdminUser}
+      module="sbg"
+      logout={() => console.log("Logout clicked")}
+      exitImpersonation={() => console.log("Exit impersonation")}
+      updateLanguage={(lng) => console.log("Language changed to:", lng)}
+      getUserOptions={(lang) => console.log("Get user options for:", lang)}
+      navigate={mockNavigate}
+      location={mockLocation}
+      matchPath={mockMatchPath}
+      Outlet={MockOutlet}
+      t={mockT}
+      checkPermission={mockCheckPermission}
+      generalContext={mockGeneralContext}
+      getUserPreference={mockGetUserPreference}
+      notificationHandlers={mockNotificationHandlers}
+      NotificationsHistoryProvider={MockNotificationsHistoryProvider}
+      sidenavConfig={mockSidenavConfig}
+      appName="sbg"
+      appLogos={appLogos}
+      languageConfig={languageConfig}
+      userHelpers={mockUserHelpers}
+      isDev={true}
+      onCollapse={(collapsed) => console.log("Sidebar collapsed:", collapsed)}
+    />
+  ),
+};
+
+// App navigation (no sidebar)
+export const AppNavigation = {
+  name: "App Navigation (No Sidebar)",
+  render: () => (
+    <AppLayout
+      user={mockUser}
+      module="app"
+      logout={() => console.log("Logout clicked")}
+      exitImpersonation={() => console.log("Exit impersonation")}
+      updateLanguage={(lng) => console.log("Language changed to:", lng)}
+      getUserOptions={(lang) => console.log("Get user options for:", lang)}
+      navigate={mockNavigate}
+      location={mockLocation}
+      matchPath={mockMatchPath}
+      Outlet={MockOutlet}
+      t={mockT}
+      checkPermission={mockCheckPermission}
+      generalContext={mockGeneralContext}
+      getUserPreference={mockGetUserPreference}
+      notificationHandlers={mockNotificationHandlers}
+      NotificationsHistoryProvider={MockNotificationsHistoryProvider}
+      sidenavConfig={mockSidenavConfig}
+      appName="sbg"
+      appLogos={appLogos}
+      languageConfig={languageConfig}
+      userHelpers={mockUserHelpers}
+      isDev={true}
+      onCollapse={(collapsed) => console.log("Sidebar collapsed:", collapsed)}
+    />
+  ),
+};
+
+// With Login Popup
+export const WithLoginPopup = {
+  name: "With Login Popup",
+  render: () => {
+    const contextWithPopup = {
+      ...mockGeneralContext,
+      logOutPopupVisible: true,
+    };
+    
+    return (
+      <AppLayout
+        user={mockUser}
+        module="sbg"
+        logout={() => console.log("Logout clicked")}
+        exitImpersonation={() => console.log("Exit impersonation")}
+        updateLanguage={(lng) => console.log("Language changed to:", lng)}
+        getUserOptions={(lang) => console.log("Get user options for:", lang)}
+        navigate={mockNavigate}
+        location={mockLocation}
+        matchPath={mockMatchPath}
+        Outlet={MockOutlet}
+        t={mockT}
+        checkPermission={mockCheckPermission}
+        generalContext={contextWithPopup}
+        getUserPreference={mockGetUserPreference}
+        notificationHandlers={mockNotificationHandlers}
+        NotificationsHistoryProvider={MockNotificationsHistoryProvider}
+        sidenavConfig={mockSidenavConfig}
+        appName="sbg"
+        appLogos={appLogos}
+        languageConfig={languageConfig}
+        userHelpers={mockUserHelpers}
+        isDev={true}
+        onCollapse={(collapsed) => console.log("Sidebar collapsed:", collapsed)}
+      />
+    );
+  },
+};
+
+// No Notifications Permission
+export const NoNotifications = {
+  name: "No Notifications Permission",
+  render: () => {
+    const userWithoutNotifications = {
+      ...mockUser,
+      role: {
+        ...mockUser.role,
+        permissions: {
+          ...mockUser.role.permissions,
+          "notifications.canView": false,
+        }
+      }
+    };
+    
+    return (
+      <AppLayout
+        user={userWithoutNotifications}
+        module="sbg"
+        logout={() => console.log("Logout clicked")}
+        exitImpersonation={() => console.log("Exit impersonation")}
+        updateLanguage={(lng) => console.log("Language changed to:", lng)}
+        getUserOptions={(lang) => console.log("Get user options for:", lang)}
+        navigate={mockNavigate}
+        location={mockLocation}
+        matchPath={mockMatchPath}
+        Outlet={MockOutlet}
+        t={mockT}
+        checkPermission={mockCheckPermission}
+        generalContext={mockGeneralContext}
+        getUserPreference={mockGetUserPreference}
+        notificationHandlers={mockNotificationHandlers}
+        NotificationsHistoryProvider={MockNotificationsHistoryProvider}
+        sidenavConfig={mockSidenavConfig}
+        appName="sbg"
+        appLogos={appLogos}
+        languageConfig={languageConfig}
+        userHelpers={mockUserHelpers}
+        isDev={true}
+        onCollapse={(collapsed) => console.log("Sidebar collapsed:", collapsed)}
+      />
+    );
+  },
+};
+
+// With Custom Children
+export const WithCustomChildren = {
+  name: "With Custom Children",
+  render: () => (
+    <AppLayout
+      user={mockUser}
+      module="sbg"
+      logout={() => console.log("Logout clicked")}
+      exitImpersonation={() => console.log("Exit impersonation")}
+      updateLanguage={(lng) => console.log("Language changed to:", lng)}
+      getUserOptions={(lang) => console.log("Get user options for:", lang)}
+      navigate={mockNavigate}
+      location={mockLocation}
+      matchPath={mockMatchPath}
+      t={mockT}
+      checkPermission={mockCheckPermission}
+      generalContext={mockGeneralContext}
+      getUserPreference={mockGetUserPreference}
+      notificationHandlers={mockNotificationHandlers}
+      NotificationsHistoryProvider={MockNotificationsHistoryProvider}
+      sidenavConfig={mockSidenavConfig}
+      appName="sbg"
+      appLogos={appLogos}
+      languageConfig={languageConfig}
+      userHelpers={mockUserHelpers}
+      isDev={true}
+      onCollapse={(collapsed) => console.log("Sidebar collapsed:", collapsed)}
+    >
+      <div style={{ padding: "40px" }}>
+        <h1>Custom Children Content</h1>
+        <p>This is custom content passed as children prop.</p>
+        <div style={{ 
+          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", 
+          color: "white",
+          padding: "30px", 
+          borderRadius: "12px",
+          marginTop: "20px" 
+        }}>
+          <h2>Beautiful Card</h2>
+          <p>With gradient background and custom styling.</p>
+        </div>
+      </div>
+    </AppLayout>
+  ),
+};

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

@@ -0,0 +1,116 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from "react";
+import { Checkbox, Form, Input, Modal } from "antd";
+import Style from './style';
+import BorderedButton from "../../../../core/components/Button/BorderedButton/index.jsx";
+
+function LoginPopup({
+  user,
+  t = (key) => key,
+  login,
+  loggingIn = false,
+  setLogOutPopupVisible,
+  firebaseToken,
+}) {
+  const [form] = Form.useForm();
+  const [formErrors, setFormErrors] = useState(null);
+
+  useEffect(() => {
+    form.setFieldsValue({ username: user?.email });
+  }, [user, form]);
+
+  const loginHandle = async () => {
+    setFormErrors(null);
+    form.validateFields().then(payload => {
+      login?.({ ...payload, firebaseToken }, () => setLogOutPopupVisible?.(false));
+    });
+  };
+
+  const renderErrors = (err, t) => {
+    document.querySelectorAll('.ant-form-item')
+      .forEach(input => input.classList.add('ant-form-item-has-error'));
+    
+    return Object.keys(err).map(key => {
+      return err[key].map(error =>
+        <div
+          key={error}
+          className="ant-form-item-explain errors-cont"
+          style={{ color: '#ff4d4f' }}
+        >
+          {t(error)}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <Modal
+      open
+      footer={null}
+      closable={false}
+    >
+      <Style className="popup">
+        <h2>{t('Log back in')}</h2>
+        <p className="pb-4">{t('You were logged out due to inactivity. Please provide your details.')}</p>
+        <Form name="login" layout="vertical" form={form} initialValues={{ remember: true }}>
+          <Form.Item
+            required
+            name="username"
+            label={t("Email")}
+            rules={[
+              {
+                required: true,
+                message: t("errors::email should not be empty")
+              },
+              {
+                pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
+                message: t('errors::email is not valid'),
+              },
+            ]}
+          >
+            <Input
+              type="email"
+              size="large"
+              disabled
+              placeholder={t("Enter your email")}
+              className="email"
+              onPressEnter={loginHandle}
+            />
+          </Form.Item>
+          <Form.Item
+            required
+            name="password"
+            label={t("Password")}
+            rules={[{
+              required: true,
+              message: t("errors::password should not be empty")
+            }]}
+          >
+            <Input.Password
+              type="password"
+              size="large"
+              className="password"
+              placeholder="••••••••"
+              onPressEnter={loginHandle}
+            />
+          </Form.Item>
+          <Form.Item name="remember" valuePropName="checked" noStyle style={{ width: '100%' }}>
+            <div style={{ display: 'flex', width: '100%' }}>
+              <div style={{ flex: 1 }}>
+                <Checkbox defaultChecked>{t("Remember me")}</Checkbox>
+              </div>
+            </div>
+          </Form.Item>
+        </Form>
+        {formErrors ? renderErrors(formErrors, t) : null}
+        <div className="buttons">
+          <BorderedButton onClick={loginHandle} type="primary" block className="normal-br mt-4">
+            {loggingIn ? t("Logging-in") : t('Log in')}
+          </BorderedButton>
+        </div>
+      </Style>
+    </Modal>
+  );
+}
+
+export default LoginPopup;

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  &.popup {
+    h2 {
+      margin-bottom: 8px;
+    }
+
+    p {
+      color: #667085;
+      margin-bottom: 20px;
+    }
+
+    .ant-form-item-label {
+      padding-bottom: 6px;
+    }
+
+    .buttons {
+      margin-top: 24px;
+    }
+
+    .errors-cont {
+      margin-top: 8px;
+    }
+  }
+`;