Merge branch 'master-AIO' into feature/IO-2433-esignature

client/src/App/App.container.backup-2026-03-04.jsx

@@ -0,0 +1,184 @@
+import { ApolloProvider } from "@apollo/client/react";
+import * as Sentry from "@sentry/react";
+import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
+import { ConfigProvider, Grid } from "antd";
+import enLocale from "antd/es/locale/en_US";
+import { useEffect, useMemo } from "react";
+import { CookiesProvider } from "react-cookie";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
+import { setDarkMode } from "../redux/application/application.actions";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
+import { signOutStart } from "../redux/user/user.actions";
+import client from "../utils/GraphQLClient";
+import App from "./App";
+import getTheme from "./themeProvider";
+
+// Base Split configuration
+const config = {
+  core: {
+    authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
+    key: "anon"
+  }
+};
+
+function SplitClientProvider({ children }) {
+  const imexshopid = useSelector((state) => state.user.imexshopid);
+  const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
+  useEffect(() => {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
+      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    }
+  }, [splitClient, imexshopid]);
+
+  return children;
+}
+
+function AppContainer() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
+  const isDarkMode = useSelector(selectDarkMode);
+  const screens = Grid.useBreakpoint();
+  const isPhone = !screens.md;
+  const isUltraWide = Boolean(screens.xxxl);
+
+  const theme = useMemo(() => {
+    const baseTheme = getTheme(isDarkMode);
+
+    return {
+      ...baseTheme,
+      token: {
+        ...(baseTheme.token || {}),
+        screenXXXL: 2160
+      },
+      components: {
+        ...(baseTheme.components || {}),
+        Table: {
+          ...(baseTheme.components?.Table || {}),
+          cellFontSizeSM: isPhone ? 12 : 13,
+          cellFontSizeMD: isPhone ? 13 : isUltraWide ? 15 : 14,
+          cellFontSize: isUltraWide ? 15 : 14,
+          cellPaddingInlineSM: isPhone ? 8 : 10,
+          cellPaddingInlineMD: isPhone ? 10 : 14,
+          cellPaddingInline: isUltraWide ? 20 : 16,
+          cellPaddingBlockSM: isPhone ? 8 : 10,
+          cellPaddingBlockMD: isPhone ? 10 : 12,
+          cellPaddingBlock: isUltraWide ? 14 : 12,
+          selectionColumnWidth: isPhone ? 44 : 52
+        }
+      }
+    };
+  }, [isDarkMode, isPhone, isUltraWide]);
+
+  const antdInput = useMemo(() => ({ autoComplete: "new-password" }), []);
+  const antdTable = useMemo(() => ({ scroll: { x: "max-content" } }), []);
+  const antdPagination = useMemo(
+    () => ({
+      showSizeChanger: !isPhone,
+      totalBoundaryShowSizeChanger: 100
+    }),
+    [isPhone]
+  );
+
+  const antdForm = useMemo(
+    () => ({
+      validateMessages: {
+        required: t("general.validation.required", { label: "${label}" })
+      }
+    }),
+    [t]
+  );
+
+  // Global seamless logout listener with redirect to /signin
+  useEffect(() => {
+    const handleSeamlessLogout = (event) => {
+      if (event.data?.type !== "seamlessLogoutRequest") return;
+
+      // Only accept messages from the parent window
+      if (event.source !== window.parent) return;
+
+      const targetOrigin = event.origin || "*";
+
+      if (currentUser?.authorized !== true) {
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
+        return;
+      }
+
+      dispatch(signOutStart());
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
+    };
+
+    window.addEventListener("message", handleSeamlessLogout);
+    return () => {
+      window.removeEventListener("message", handleSeamlessLogout);
+    };
+  }, [dispatch, currentUser?.authorized]);
+
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
+  useEffect(() => {
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
+  }, [isDarkMode]);
+
+  // Sync darkMode with localStorage
+  useEffect(() => {
+    const uid = currentUser?.uid;
+
+    if (!uid) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    const key = `dark-mode-${uid}`;
+    const raw = localStorage.getItem(key);
+
+    if (raw == null) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    try {
+      dispatch(setDarkMode(Boolean(JSON.parse(raw))));
+    } catch {
+      dispatch(setDarkMode(false));
+    }
+  }, [currentUser?.uid, dispatch]);
+
+  // Persist darkMode
+  useEffect(() => {
+    const uid = currentUser?.uid;
+    if (!uid) return;
+
+    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
+  }, [isDarkMode, currentUser?.uid]);
+
+  return (
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={antdInput}
+          locale={enLocale}
+          theme={theme}
+          form={antdForm}
+          table={antdTable}
+          pagination={antdPagination}
+          componentSize={isPhone ? "small" : isUltraWide ? "large" : "middle"}
+          popupOverflow="viewport"
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
+  );
+}
+
+export default Sentry.withProfiler(AppContainer);

client/src/App/App.container.pre-rollback-2026-03-04.jsx

@@ -0,0 +1,184 @@
+import { ApolloProvider } from "@apollo/client/react";
+import * as Sentry from "@sentry/react";
+import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
+import { ConfigProvider, Grid } from "antd";
+import enLocale from "antd/es/locale/en_US";
+import { useEffect, useMemo } from "react";
+import { CookiesProvider } from "react-cookie";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
+import { setDarkMode } from "../redux/application/application.actions";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
+import { signOutStart } from "../redux/user/user.actions";
+import client from "../utils/GraphQLClient";
+import App from "./App";
+import getTheme from "./themeProvider";
+
+// Base Split configuration
+const config = {
+  core: {
+    authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
+    key: "anon"
+  }
+};
+
+function SplitClientProvider({ children }) {
+  const imexshopid = useSelector((state) => state.user.imexshopid);
+  const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
+  useEffect(() => {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
+      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    }
+  }, [splitClient, imexshopid]);
+
+  return children;
+}
+
+function AppContainer() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
+  const isDarkMode = useSelector(selectDarkMode);
+  const screens = Grid.useBreakpoint();
+  const isPhone = !screens.md;
+  const isUltraWide = Boolean(screens.xxxl);
+
+  const theme = useMemo(() => {
+    const baseTheme = getTheme(isDarkMode);
+
+    return {
+      ...baseTheme,
+      token: {
+        ...(baseTheme.token || {}),
+        screenXXXL: 2160
+      },
+      components: {
+        ...(baseTheme.components || {}),
+        Table: {
+          ...(baseTheme.components?.Table || {}),
+          cellFontSizeSM: isPhone ? 12 : 13,
+          cellFontSizeMD: isPhone ? 13 : isUltraWide ? 15 : 14,
+          cellFontSize: isUltraWide ? 15 : 14,
+          cellPaddingInlineSM: isPhone ? 8 : 10,
+          cellPaddingInlineMD: isPhone ? 10 : 14,
+          cellPaddingInline: isUltraWide ? 20 : 16,
+          cellPaddingBlockSM: isPhone ? 8 : 10,
+          cellPaddingBlockMD: isPhone ? 10 : 12,
+          cellPaddingBlock: isUltraWide ? 14 : 12,
+          selectionColumnWidth: isPhone ? 44 : 52
+        }
+      }
+    };
+  }, [isDarkMode, isPhone, isUltraWide]);
+
+  const antdInput = useMemo(() => ({ autoComplete: "new-password" }), []);
+  const antdTable = useMemo(() => ({ scroll: { x: "max-content" } }), []);
+  const antdPagination = useMemo(
+    () => ({
+      showSizeChanger: !isPhone,
+      totalBoundaryShowSizeChanger: 100
+    }),
+    [isPhone]
+  );
+
+  const antdForm = useMemo(
+    () => ({
+      validateMessages: {
+        required: t("general.validation.required", { label: "${label}" })
+      }
+    }),
+    [t]
+  );
+
+  // Global seamless logout listener with redirect to /signin
+  useEffect(() => {
+    const handleSeamlessLogout = (event) => {
+      if (event.data?.type !== "seamlessLogoutRequest") return;
+
+      // Only accept messages from the parent window
+      if (event.source !== window.parent) return;
+
+      const targetOrigin = event.origin || "*";
+
+      if (currentUser?.authorized !== true) {
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
+        return;
+      }
+
+      dispatch(signOutStart());
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
+    };
+
+    window.addEventListener("message", handleSeamlessLogout);
+    return () => {
+      window.removeEventListener("message", handleSeamlessLogout);
+    };
+  }, [dispatch, currentUser?.authorized]);
+
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
+  useEffect(() => {
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
+  }, [isDarkMode]);
+
+  // Sync darkMode with localStorage
+  useEffect(() => {
+    const uid = currentUser?.uid;
+
+    if (!uid) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    const key = `dark-mode-${uid}`;
+    const raw = localStorage.getItem(key);
+
+    if (raw == null) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    try {
+      dispatch(setDarkMode(Boolean(JSON.parse(raw))));
+    } catch {
+      dispatch(setDarkMode(false));
+    }
+  }, [currentUser?.uid, dispatch]);
+
+  // Persist darkMode
+  useEffect(() => {
+    const uid = currentUser?.uid;
+    if (!uid) return;
+
+    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
+  }, [isDarkMode, currentUser?.uid]);
+
+  return (
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={antdInput}
+          locale={enLocale}
+          theme={theme}
+          form={antdForm}
+          table={antdTable}
+          pagination={antdPagination}
+          componentSize={isPhone ? "small" : isUltraWide ? "large" : "middle"}
+          popupOverflow="viewport"
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
+  );
+}
+
+export default Sentry.withProfiler(AppContainer);

client/src/App/App.styles.scss

@@ -443,37 +443,71 @@
   flex-direction: column;
 }
 
+/* DMS top panels: prevent card/table overflow into adjacent column at desktop+zoom */
+.dms-top-panel-col {
+  min-width: 0;
+}
+
+.dms-top-panel-col > .ant-card {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dms-top-panel-col > .ant-card .ant-card-body {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dms-top-panel-col .ant-table-wrapper,
+.dms-top-panel-col .ant-tabs,
+.dms-top-panel-col .ant-tabs-content,
+.dms-top-panel-col .ant-tabs-tabpane {
+  min-width: 0;
+  max-width: 100%;
+}
+
 //.rbc-time-header-gutter {
 //  padding: 0;
 //}
 
-/* globally allow shrink inside table cells */
-.prod-list-table .ant-table-cell,
-.prod-list-table .ant-table-cell > * {
-  min-width: 0;
-}
+///* globally allow shrink inside table cells */
+//.prod-list-table .ant-table-cell,
+//.prod-list-table .ant-table-cell > * {
+//  min-width: 0;
+//}
+//
+///* common AntD offenders */
+//.prod-list-table > .ant-table-cell .ant-space,
+//.ant-table-cell .ant-space-item {
+//  min-width: 0;
+//}
+//
+///* Keep your custom header content on the left, push AntD sorter to the far right */
+//.prod-list-table .ant-table-column-sorters {
+//  display: flex !important;
+//  align-items: center;
+//  width: 100%;
+//}
+//
+//.prod-list-table .ant-table-column-title {
+//  flex: 1 1 auto;
+//  min-width: 0; /* allows ellipsis to work */
+//}
+//
+//.prod-list-table .ant-table-column-sorter {
+//  margin-left: auto;
+//  flex: 0 0 auto;
+//}
 
-/* common AntD offenders */
-.prod-list-table > .ant-table-cell .ant-space,
-.ant-table-cell .ant-space-item {
-  min-width: 0;
-}
 
-/* Keep your custom header content on the left, push AntD sorter to the far right */
-.prod-list-table .ant-table-column-sorters {
-  display: flex !important;
-  align-items: center;
-  width: 100%;
-}
-
-.prod-list-table .ant-table-column-title {
-  flex: 1 1 auto;
-  min-width: 0; /* allows ellipsis to work */
-}
-
-.prod-list-table .ant-table-column-sorter {
-  margin-left: auto;
-  flex: 0 0 auto;
+.global-search-autocomplete-fix {
+  // This is the extra value render that causes the “duplicate text”
+  .ant-select-selection-item {
+    position: absolute !important;
+    left: -10000px !important;
+    pointer-events: none !important;
+  }
 }
 
 

client/src/App/themeProvider.js

@@ -68,7 +68,7 @@ const currentTheme = import.meta.env.DEV ? devTheme : prodTheme;
 
 const getTheme = (isDarkMode) => ({
   algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
-  ...defaultsDeep(currentTheme, defaultTheme)
+  ...defaultsDeep({}, currentTheme, defaultTheme(isDarkMode))
 });
 
 export default getTheme;