datastake-daf 0.6.744 → 0.6.746

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.744",
+	"version": "0.6.746",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -22,7 +22,9 @@
 		"docx-preview": "^0.3.7",
 		"dot-object": "^2.1.5",
 		"file-saver": "^2.0.5",
+		"firebase": "^12.5.0",
 		"html-to-image": "^1.11.13",
+		"i18next": "^25.6.0",
 		"leaflet": "^1.0.3",
 		"leaflet-editable": "^1.3.0",
 		"leaflet-geosearch": "^3.1.0",

package/rollup.config.js

@@ -27,7 +27,7 @@ const external = [
   "react-collapsed",
   "leaflet-geosearch",
   "react-html-parser",
-  "styled-component",
+  "styled-components",
   "@ant-design/icons",
   "deepmerge",
   "leaflet.heat",
@@ -46,7 +46,12 @@ const external = [
   "file-saver",
   "axios",
   "form-data",
-  "firebase"
+  "firebase",
+  "firebase/app",
+  "firebase/messaging",
+  "i18next",
+  "i18next-browser-languagedetector",
+  "react-i18next"
 ];
 
 // Four builds, components, utils, hooks, context

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from "react";
 import CarouselWidget from "../CarouselWidget/index.jsx";
-import { Image, Carousel } from "antd";
+import { Image, Carousel, Empty } from "antd";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import CustomArrowButton from "./components/CustomArrowButton/index.js";
-import { StyledCarouselWrapper } from "./style.js";
+import { StyledCarouselWrapper, EmptyStateContainer } from "./style.js";
 import PropTypes from "prop-types";
 
 /**
@@ -45,6 +45,8 @@ import PropTypes from "prop-types";
  * @param {string} [props.arrowIconColor="#666"] - Default color of arrow icons
  * @param {string} [props.arrowHoverIconColor="#1890ff"] - Color of arrow icons on hover
  * @param {boolean} [props.customArrows=false] - Whether to show custom navigation arrows
+ * @param {ReactNode} [props.emptyLogo] - Custom logo/icon for empty state (defaults to Ant Design simple empty icon)
+ * @param {string|ReactNode} [props.emptyText="No Image"] - Custom text for empty state
  * @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -74,6 +76,8 @@ function ImageCarousel({
   arrowIconColor = "#666",
   arrowHoverIconColor = "#1890ff",
   customArrows = false,
+  emptyLogo = Empty.PRESENTED_IMAGE_SIMPLE,
+  emptyText = "No Image",
   ...rest
 }) {
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -92,7 +96,11 @@ function ImageCarousel({
     carouselRef.current?.next();
   };
 
-
+  // Check if images array is empty or has no valid images
+  const hasImages = images && images.length > 0 && images.some(image => {
+    const imageSrc = typeof image === "string" ? image : image?.src;
+    return imageSrc && imageSrc.trim().length > 0;
+  });
   return (
     <>
       <StyledCarouselWrapper 
@@ -108,38 +116,47 @@ function ImageCarousel({
           infinite
           dots={false}
         >
-        <Carousel ref={carouselRef} afterChange={handleCarouselChange} arrows={false} {...rest}  infinite>
-          {images.map((image, index) => {
-            const imageSrc = typeof image === "string" ? image : image.src;
-            const imageAlt =
-              typeof image === "string"
-                ? `${title} - Image ${index + 1}`
-                : image.alt;
+          {hasImages ? (
+            <Carousel ref={carouselRef} afterChange={handleCarouselChange} arrows={false} {...rest} infinite>
+              {images.map((image, index) => {
+                const imageSrc = typeof image === "string" ? image : image.src;
+                const imageAlt =
+                  typeof image === "string"
+                    ? `${title} - Image ${index + 1}`
+                    : image.alt;
 
-            return (
-              <div key={imageSrc}>
-                <div className="image-container">
-                  <Image
-                    src={imageSrc}
-                    alt={imageAlt}
-                    fallback={fallback}
-                    loading="lazy"
-                    preview={{
-                      visible: false,
-                    }}
-                    onClick={() => {
-                      setCurrent(index);
-                      setPreviewVisible(true);
-                    }}
-                  />
-                </div>
-              </div>
-            );
-          })}
-        </Carousel>
+                return (
+                  <div key={imageSrc}>
+                    <div className="image-container">
+                      <Image
+                        src={imageSrc}
+                        alt={imageAlt}
+                        fallback={fallback}
+                        loading="lazy"
+                        preview={{
+                          visible: false,
+                        }}
+                        onClick={() => {
+                          setCurrent(index);
+                          setPreviewVisible(true);
+                        }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </Carousel>
+          ) : (
+            <EmptyStateContainer height={height}>
+              <Empty 
+                image={emptyLogo || Empty.PRESENTED_IMAGE_SIMPLE}
+                description={<span style={{ color: '#8C8C8C' }}>{emptyText}</span>}
+              />
+            </EmptyStateContainer>
+          )}
         </CarouselWidget>
         
-        {customArrows && images && images.length > 1 && (
+        {customArrows && hasImages && images.length > 1 && (
           <>
             <CustomArrowButton
               icon={<LeftOutlined />}
@@ -158,29 +175,31 @@ function ImageCarousel({
         )}
       </StyledCarouselWrapper>
 
-      <div style={{ display: "none" }}>
-        <Image.PreviewGroup
-          preview={{
-            visible: previewVisible,
-            current,
-            onVisibleChange: (vis) => setPreviewVisible(vis),
-            onChange: (idx) => {
-              setCurrent(idx);
-              carouselRef.current?.goTo(idx);
-            },
-          }}
-        >
-          {images.map((image, index) => {
-            const imageSrc = typeof image === "string" ? image : image.src;
-            const imageAlt =
-              typeof image === "string"
-                ? `${title} - Image ${index + 1}`
-                : image.alt;
+      {hasImages && (
+        <div style={{ display: "none" }}>
+          <Image.PreviewGroup
+            preview={{
+              visible: previewVisible,
+              current,
+              onVisibleChange: (vis) => setPreviewVisible(vis),
+              onChange: (idx) => {
+                setCurrent(idx);
+                carouselRef.current?.goTo(idx);
+              },
+            }}
+          >
+            {images.map((image, index) => {
+              const imageSrc = typeof image === "string" ? image : image.src;
+              const imageAlt =
+                typeof image === "string"
+                  ? `${title} - Image ${index + 1}`
+                  : image.alt;
 
-            return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
-          })}
-        </Image.PreviewGroup>
-      </div>
+              return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
+            })}
+          </Image.PreviewGroup>
+        </div>
+      )}
     </>
   );
 }
@@ -195,6 +214,8 @@ ImageCarousel.propTypes = {
   arrowIconColor: PropTypes.string,
   arrowHoverIconColor: PropTypes.string,
   customArrows: PropTypes.bool,
+  emptyLogo: PropTypes.node,
+  emptyText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 export default ImageCarousel;

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/style.js

@@ -42,4 +42,48 @@ export const StyledCarouselWrapper = styled.div`
     margin-bottom: -3px !important;
   }
 
+`;
+
+export const EmptyStateContainer = styled.div`
+  width: 100%;
+  height: ${props => props.height || 400}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  border-radius: 6px;
+  position: relative;
+
+  .ant-empty {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  .ant-empty-image {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-empty-description {
+    text-align: center;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 2px;
+    background-color: #722ed1;
+    border-radius: 1px;
+  }
 `;

package/src/@daf/core/components/DynamicForm/components/ajaxModal.js

@@ -261,7 +261,7 @@ function AjaxModal({
         setData({})
         setModalVisible(!modalVisible);
       }}
-      destroyOnClose={destroy}
+      destroyOnHidden={destroy}
     >
       {modalVisible ? (isFetching ?
         <div className="form-loader"><Loading /></div>

package/src/@daf/core/components/EditForm/components/Comment/index.js

@@ -229,7 +229,7 @@ export default function Comment({
         footer={null}
         width={650}
         className="max-h-50"
-        destroyOnClose
+        destroyOnHidden
         onCancel={onCloseModal}
         title={(
           <ModalHeader title={'Comment'} />

package/src/@daf/core/components/EditForm/components/DataLink/ajaxSelectDataLink.js

@@ -521,7 +521,7 @@ export function AjaxSelectMain({
   function updateOther(item, label, value) {
     try {
       // remove the last comma and closing bracket
-      const cleanedString = updateOtherValues.replace(/,\s*]$/, "]");
+      const cleanedString = updateOtherValues?.replace(/,\s*]$/, "]");
       const updateOtherVal = updateOtherValues ? JSON.parse(cleanedString) : {};
       const valueToSet = isDataLink ? item : value;
 

package/src/@daf/core/components/EditForm/components/DataLink/flat.js

@@ -554,7 +554,7 @@ export default function DataLinkFlat({
         footer={null}
         width={650}
         className="max-h-50"
-        destroyOnClose
+        destroyOnHidden
         onCancel={onCloseModal}
         title={(
           <ModalHeader title={getLabelFromScopeForDataLink(form?.modalLabel || form?.label, formScope)} />

package/src/@daf/core/components/EditForm/components/DataLink/index.js

@@ -547,7 +547,7 @@ export default function DataLink({
         footer={null}
         width={650}
         className="max-h-50"
-        destroyOnClose
+        destroyOnHidden
         onCancel={onCloseModal}
         title={(
           <ModalHeader title={getLabelFromScopeForDataLink(form?.modalLabel || form?.label, formScope)} />

package/src/@daf/core/components/EditForm/components/DataLinkGroup/index.js

@@ -539,7 +539,7 @@ export default function DataLinkGroup({
         footer={null}
         width={650}
         className="max-h-50"
-        destroyOnClose
+        destroyOnHidden
         onCancel={onCloseModal}
         title={(
           <ModalHeader title={getLabelFromScopeForDataLink(form?.modalLabel || form?.label, formScope)} />

package/src/@daf/core/components/EditForm/components/Repeatable/index.js

@@ -611,7 +611,7 @@ export default function Repeatable({
         footer={null}
         width={650}
         className="max-h-50"
-        destroyOnClose
+        destroyOnHidden
         onCancel={onCloseModal}
         title={(
           <ModalHeader

package/src/@daf/core/components/EditForm/components/ajaxSelect.js

@@ -462,7 +462,7 @@ export function AjaxSelectMain({
 	function updateOther(item, label, value) {
 		try {
 			// remove the last comma and closing bracket
-			const cleanedString = updateOtherValues.replace(/,\s*]$/, "]");
+			const cleanedString = updateOtherValues?.replace(/,\s*]$/, "]");
 			const updateOtherVal = updateOtherValues ? JSON.parse(cleanedString) : {};
 
 			const _new = { ...formsValue };

package/src/@daf/core/components/EditForm/components/geolocation.js

@@ -123,6 +123,7 @@ export default function Geolocation({
           searchLabel: t('Search'),
           provider: mapProvider,
           style: 'button',
+          position: 'topleft',
           notFoundMessage: t('Location not found'),
           showMarker: false,
           marker: {

package/src/@daf/core/components/EditForm/helper.js

@@ -2862,10 +2862,6 @@ export const GetFormItem = ({
 			if (input && typeof input === "object") {
 				// check if input is valid
 				const hideComment = namespace === "project-readiness";
-				console.log("hideComment", {
-					hideComment,
-					namespace,
-				});
 				return (
 					<>
 						<div className="flex-row input-cont">

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineAccount/index.jsx

@@ -46,7 +46,7 @@ export default function CombineAccountModal({
 			withModalFormWrapper={false}
 			width={1100}
 			disabled={isDisabled}
-			destroyOnClose={true}
+			destroyOnHidden={true}
 		>
 			<Container>
 				<div className="daf-table-wrapper no-pagination">

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineLocation/index.jsx

@@ -52,7 +52,7 @@ export default function CombineLocationModal({
 			withModalFormWrapper={false}
 			width={1100}
 			disabled={isDisabled}
-			destroyOnClose={true}
+			destroyOnHidden={true}
 			onValuesChange={() => {
 				setIsDisabled(() => {
 				  const values = MainForm.getFieldsValue();

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineSubjects/index.jsx

@@ -53,7 +53,7 @@ export default function CombineSubjectsModal({
 			withModalFormWrapper={false}
 			width={1100}
 			disabled={isDisabled}
-			destroyOnClose={true}
+			destroyOnHidden={true}
 			onValuesChange={() => {
 				setIsDisabled(() => {
 				  const values = MainForm.getFieldsValue();

package/src/@daf/core/components/Screens/TableScreen/TablePageWithTabs/index.jsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Tabs, Drawer } from 'antd'
+import Header from '../../../Header/index.jsx'
+import BaseScreen from '../../BaseScreen/index.jsx'
+import { CREATE_DRAWER_WIDTH } from '../../../../../../helpers/Forms.js'
+import DrawerHeader from '../../../Header/DrawerHeader/index.jsx'
+
+const TablePageWithTabs = ({
+    t= () => {},
+    title,
+    breadCrumbs,
+    location,
+    loading = false,
+    goTo = () => {},
+    defaultActiveTab = "own",
+    checkboxConfig = {},
+    columns = [],
+    data = {},
+    APP,
+    getApiBaseUrl = () => {},
+    selectOptions = {},
+    selectFiltersConfig = {},
+    getRedirectLink = () => {},
+    filtersConfig = {},
+    isMobile,
+    view,
+    getActiveTab = () => {},
+    onDownload = () => {},
+    downloadDisabled = false,
+    drawerTitle = "",
+    onCreateModalClose = () => {},
+    children
+}) => {
+    const params = new URLSearchParams(location?.search);
+    const [activeTab, setActiveTab] = useState(params.get("tab") || defaultActiveTab);
+    const [openCreateModal, setOpenCreateModal] = useState(params.has("create"));
+
+    const getActiveTabRef = useRef(getActiveTab);
+    useEffect(() => {
+        getActiveTabRef.current = getActiveTab;
+    }, [getActiveTab]);
+
+    useEffect(() => {
+        getActiveTabRef.current(activeTab);
+    }, [activeTab]);
+
+    return (
+        <div className="semibold form-input-output daf-create-view">
+            <Header 
+                title={t(title)}
+                breadcrumbs={breadCrumbs}
+                actionButtons={[
+					{
+						type: "primary",
+						onClick: () => setOpenCreateModal(true),
+						tooltip: t("New"),
+						icon: "Add",
+					},
+				]}
+                onDownload={onDownload}
+                downloadDisabled={downloadDisabled}
+            />
+            <Tabs
+                items={[
+                    { label: t("All Data"), key: "all" },
+                    { label: t("Own Data"), key: "own" },
+                    { label: t("Partners"), key: "shared" },
+                ]}
+                defaultActiveKey={activeTab}
+                activeKey={activeTab}
+                onChange={(val) => {
+                    if (loading) {
+                        return;
+                    }
+        
+                    setActiveTab(val);
+                        
+                    const newParams = new URLSearchParams(location?.search);
+                    newParams.set("tab", val);
+                    goTo(`${location.pathname}?${newParams.toString()}`);
+                }}
+                className="view-page-tabs mt-3"
+            />
+            <BaseScreen 
+                t={t}
+                checkboxConfig={checkboxConfig}
+                defaultTableFilters={{}}
+                columns={columns}
+                data={data}
+                loading={loading}
+                location={location}
+                goTo={goTo}
+                APP={APP}
+                getApiBaseUrl={getApiBaseUrl}
+                selectOptions={selectOptions}
+                selectFilters={selectFiltersConfig}
+                view={view}
+                getRedirectLink={getRedirectLink}
+                defaultUrlParams={{}}
+                module={APP}
+                filtersConfig={filtersConfig}
+                isMobile={isMobile}
+            />
+            {openCreateModal && (
+                <Drawer
+                    destroyOnHidden
+                    title={
+                        <DrawerHeader 
+                            title={t(drawerTitle)}
+                        />
+                    }
+                    open={openCreateModal}
+                    onClose={() => setOpenCreateModal(false)}
+                    width={CREATE_DRAWER_WIDTH}
+                    bodyStyle={{ padding: 0 }}
+                >
+                {typeof children === 'function' 
+                    ? children({ onDrawerClose: () => setOpenCreateModal(false) })
+                    : children
+                }
+                </Drawer>
+            )}
+
+        </div>
+    )
+}
+
+export default TablePageWithTabs

package/src/@daf/{pages/pages → core/components/TableScreen}/TablePageWithTabs/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Tabs, Drawer } from 'antd'
-import Header from '../../../core/components/Header/index.jsx'
-import BaseScreen from '../../../core/components/Screens/BaseScreen/index.jsx'
+import Header from '../../../Header/index.jsx'
+import BaseScreen from '../../BaseScreen/index.jsx'
 import { CREATE_DRAWER_WIDTH } from '../../../../helpers/Forms.js'
-import DrawerHeader from '../../../core/components/Header/DrawerHeader/index.jsx'
+import DrawerHeader from '../../../Header/DrawerHeader/index.jsx'
 
 const TablePageWithTabs = ({
     t= () => {},
@@ -33,7 +33,7 @@ const TablePageWithTabs = ({
 }) => {
     const params = new URLSearchParams(location?.search);
     const [activeTab, setActiveTab] = useState(params.get("tab") || defaultActiveTab);
-    const [openCreateModal, setOpenCreateModal] = useState(false);
+    const [openCreateModal, setOpenCreateModal] = useState(params.has("create"));
 
     const getActiveTabRef = useRef(getActiveTab);
     useEffect(() => {
@@ -103,7 +103,7 @@ const TablePageWithTabs = ({
             />
             {openCreateModal && (
                 <Drawer
-                    destroyOnClose
+                    destroyOnHidden
                     title={
                         <DrawerHeader 
                             title={t(drawerTitle)}

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

@@ -156,8 +156,9 @@ function AppLayout({
         console.log(err);
       }
     };
-
-    _fetchPreferences();
+    if (!userPreferences) {
+      _fetchPreferences();
+    }
   }, [getUserPreference]);
 
   const setIsCollapse = (val = false) => {
@@ -370,9 +371,9 @@ function AppLayout({
                 className="ln-22 dark-select language-select"
                 style={{ color: 'white', height: '30px' }}
                 defaultValue={StorageManager.get('datastakeLng') || 'en'}
-                bordered={false}
+                variant="borderless"
                 onChange={lng => updateLanguage?.(lng)}
-                popupClassName={formatClassname(['dark-select-popup language-select', appName, theme.customHeaderColor && 'custom'])}
+                classNames={{ popup: formatClassname(['dark-select-popup language-select', appName, theme.customHeaderColor && 'custom']) }}
               >
                 {languageConfig.map(lang => (
                   <Select.Option key={lang.value} value={lang.value}>

package/src/@daf/layouts/AuthLayout/components/Select/style.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
+import { MOBILE_WIDTH, TABLET_WIDTH } from "../../../../../constants/Style";
 
 const Style = styled.div`
   display: flex;

package/src/@daf/layouts/AuthLayout/style.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
+import { MOBILE_WIDTH, TABLET_WIDTH } from "../../../constants/Style";
 
 const Style = styled.div`
   .errors-cont {

package/src/@daf/pages/{dashboards → Dashboards}/SupplyChain/components/ChartsContainer/components/Identification/index.js

@@ -25,8 +25,6 @@ function Identification({
 		[t],
 	);
 
-	console.log({identificationData: data})
-
     const chartConfig = useIdentification({ data, theme, options });
 
     return (

package/src/@daf/pages/{dashboards → Dashboards}/UserDashboard/components/KeyIndicators/config.js

@@ -48,7 +48,7 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 				<div className="flex-1">{t("Corrective Actions")}</div>
 				<div
 					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/corrective-actions"))}
+					onClick={() => goTo(getRedirectLink("/app/activities"))}
 				>
 					<CustomIcon
 						name="LinkNewTab"
@@ -77,7 +77,7 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 				<div className="flex-1">{t("Reported Incidents")}</div>
 				<div
 					className="cursor-pointer"
-					onClick={() => goTo(getRedirectLink("/app/incident"))}
+					onClick={() => goTo(getRedirectLink("/app/incidents"))}
 				>
 					<CustomIcon
 						name="LinkNewTab"

package/src/@daf/pages/{dashboards → Dashboards}/UserDashboard/components/MineSites/index.jsx

@@ -63,11 +63,7 @@ function MineSites({
 		}),
 		[activeTab, selectedPartners],
 	);
-
-	console.log({activeTab})
-	console.log({dataFetchConfig})
-
-    const { data, loading, setData } = useWidgetFetch({config: dataFetchConfig});
+  const { data, loading, setData } = useWidgetFetch({config: dataFetchConfig});
 
 	const tabs = useMemo(() => getTabs(t), [t]);