@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/common/themeProvider/ThemeEditor.jsx

@@ -0,0 +1,319 @@
+import { updateThemeConfig, updateCanSetPersonalizedTheme } from '@/store/reducers/ThemeReducer';
+import CustomDropdown from '@/views/custom-components/CustomDropdown';
+import { Box, Button, Switch, Typography } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useDispatch, useSelector } from 'react-redux';
+import ColorInputs from './ColorInputs';
+import { execute } from '@/common/services/QueryBuilder';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { lightThemeConfig, darkThemeConfig } from '@/common/themeProvider/themeConfig';
+import { showToast } from '../toaster/toaster';
+import { setHeaderTitle } from '@/store/reducers/AuthenticationReducer';
+
+const THEME_SOURCE_KEYS = {
+  personalized: 'userTheme',
+  implementation: 'implementationTheme',
+};
+
+const syncThemeConfigCache = (implementationWise, themeObject) => {
+  try {
+    const currentCache = JSON.parse(localStorage.getItem('theme_config') || '{}');
+    const cacheWithoutLegacyTheme = { ...currentCache };
+    delete cacheWithoutLegacyTheme.theme;
+
+    const cacheKey = implementationWise ? THEME_SOURCE_KEYS.implementation : THEME_SOURCE_KEYS.personalized;
+    localStorage.setItem(
+      'theme_config',
+      JSON.stringify({
+        ...cacheWithoutLegacyTheme,
+        [cacheKey]: JSON.stringify(themeObject),
+      })
+    );
+  } catch (error) {
+    console.error('Error syncing theme config cache:', error);
+  }
+};
+
+const ThemeEditor = () => {
+  const dispatch = useDispatch();
+  const env = GeneralUtil.getEnv();
+  const personilizedThemes = useSelector((state) => state.theme.personilizedThemes);
+  const [implementationWise, setImplementationWise] = useState(false);
+  const [themeConfigs, setThemeConfigs] = useState({
+    light: lightThemeConfig,
+    dark: darkThemeConfig,
+  });
+
+  const { user } = useSelector((state) => state.Authenticate);
+  const [selectedThemeType, setSelectedThemeType] = useState('light');
+  const [updatedConfig, setUpdatedConfig] = useState(themeConfigs[selectedThemeType]);
+  const [themeStyle] = useState('palette');
+
+  const { control } = useForm({
+    mode: 'onChange',
+  });
+
+  useEffect(() => {
+    dispatch(setHeaderTitle("Theme Configuration"));
+    setUpdatedConfig(() => themeConfigs[selectedThemeType]);
+  }, [selectedThemeType, themeConfigs]);
+
+  const getThemeConfig = async (personalized) => {
+    try {
+      let data;
+      if (personalized) {
+        const response = await execute({
+          code: 'get_user_theme_config',
+          parameters: {
+            user_id: user?.id,
+          },
+        });
+        data = response.data;
+      } else {
+        const response = await execute({
+          code: 'GET_IMPLEMENTATION_THEME_CONFIG',
+          parameters: {
+            implementation: env,
+          },
+        });
+        data = response.data;
+      }
+      if (data && data.result && data.result[0]?.theme) {
+        const fetchedTheme = JSON.parse(data.result[0].theme);
+        setThemeConfigs(fetchedTheme);
+      } else {
+        setThemeConfigs({
+          light: lightThemeConfig,
+          dark: darkThemeConfig,
+        });
+      }
+    } catch (error) {
+      console.error('Error fetching theme config:', error);
+    }
+  };
+  useEffect(() => {
+    if (implementationWise) {
+      getThemeConfig(false);
+    } else {
+      getThemeConfig(true);
+    }
+  }, [implementationWise]);
+
+  const handleColorChange = (colorGroup, colorKey, value) => {
+    setUpdatedConfig((prev) => ({
+      ...prev,
+      palette: {
+        ...prev.palette,
+        [colorGroup]: {
+          ...prev.palette[colorGroup],
+          [colorKey]: value,
+        },
+      },
+    }));
+  };
+
+  const handleSave = async () => {
+    try {
+      const themeObject = { ...themeConfigs, [selectedThemeType]: updatedConfig };
+      if (implementationWise) {
+        await execute({
+          code: 'UPDATE_IMPLEMANTATIONWISE_THEME_CONFIG',
+          parameters: {
+            implementation: env,
+            theme_config: JSON.stringify(themeObject),
+          },
+        }).catch((err) => {
+          showToast({ message: 'Error in saving config', type: 'error' });
+          console.error(err);
+        });
+        showToast({ message: 'Config Saved Successfully', type: 'success' });
+      } else {
+        await execute({
+          code: 'update_theme_config',
+          parameters: {
+            user_id: user?.id,
+            theme_config: JSON.stringify(themeObject),
+          },
+        }).catch((err) => {
+          showToast({ message: 'Error in saving config', type: 'error' });
+          console.error(err);
+        });
+        showToast({ message: 'Config Saved Successfully', type: 'success' });
+        dispatch(updateCanSetPersonalizedTheme(true));
+      }
+
+      syncThemeConfigCache(implementationWise, themeObject);
+      setThemeConfigs(themeObject);
+
+      if ((personilizedThemes && !implementationWise) || (!personilizedThemes && implementationWise)) {
+        dispatch(
+          updateThemeConfig({
+            themeType: selectedThemeType,
+            config: updatedConfig,
+          })
+        );
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const resetThemeConfig = async () => {
+    try {
+      const themeObject = { light: lightThemeConfig, dark: darkThemeConfig };
+      if (implementationWise) {
+        await execute({
+          code: 'UPDATE_IMPLEMANTATIONWISE_THEME_CONFIG',
+          parameters: {
+            implementation: env,
+            theme_config: JSON.stringify(themeObject),
+          },
+        }).catch((err) => {
+          console.error(err);
+          showToast({ message: 'Error in resetting config', type: 'error' });
+        });
+        showToast({ message: 'Config Reset Successfully', type: 'success' });
+      } else {
+        await execute({
+          code: 'update_theme_config',
+          parameters: {
+            user_id: user?.id,
+            theme_config: JSON.stringify(themeObject),
+          },
+        }).catch((err) => {
+          showToast({ message: 'Error in resetting config', type: 'error' });
+          console.error(err);
+        });
+        showToast({ message: 'Config Reset Successfully', type: 'success' });
+        dispatch(updateCanSetPersonalizedTheme(true));
+      }
+
+      syncThemeConfigCache(implementationWise, themeObject);
+
+      if ((personilizedThemes && !implementationWise) || (!personilizedThemes && implementationWise)) {
+        dispatch(
+          updateThemeConfig({
+            themeType: 'light',
+            config: lightThemeConfig,
+          })
+        );
+        dispatch(
+          updateThemeConfig({
+            themeType: 'dark',
+            config: darkThemeConfig,
+          })
+        );
+      }
+
+      setThemeConfigs({
+        light: lightThemeConfig,
+        dark: darkThemeConfig,
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Box sx={{ padding: '20px 0px', maxWidth: 1600, margin: '0 auto' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          gap: 3,
+          mb: 4,
+          flexWrap: 'wrap',
+          '& > *': { flex: '1 1 300px' },
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center', // ✅ vertical centering
+            // justifyContent: 'space-between', // optional: space between label & switch
+            minWidth: 300,
+          }}
+        >
+          <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
+            Implentation Wise Theme
+          </Typography>
+          <Switch
+            checked={implementationWise}
+            onChange={(e) => {
+              if (user?.roleName === 'Argus Admin') {
+                setImplementationWise(e.target.checked)
+              } else {
+                showToast({ message: 'You are not authorized to change implementation wise theme!', type: 'info' })
+              }
+            }}
+            color="primary"
+          />
+        </Box>
+        <Box sx={{ minWidth: 300 }}>
+          <Typography variant="subtitle2" sx={{ mb: 1, color: 'text.secondary' }}>
+            Select Theme
+          </Typography>
+          <CustomDropdown
+            control={control}
+            size="small"
+            defaultValue={selectedThemeType}
+            name="themeType"
+            options={Object.keys(themeConfigs)}
+            onChange={(e) => setSelectedThemeType(e.target.value.toLowerCase())}
+          />
+        </Box>
+        {/* <Box sx={{ minWidth: 300 }}>
+          <Typography variant="subtitle2" sx={{ mb: 1, color: 'text.secondary' }}>
+            Select Theme Styles :
+          </Typography>
+          <CustomDropdown
+            control={control}
+            name="themeStyles"
+            defaultValue={themeStyle.charAt(0).toUpperCase() + themeStyle.slice(1)}
+            options={Object.keys(themeConfigs[selectedThemeType]).map(
+              (key) => key.charAt(0).toUpperCase() + key.slice(1)
+            )}
+            onChange={(e) => setThemeStyle(e.target.value.toLowerCase())}
+          />
+        </Box> */}
+      </Box>
+
+      <ColorInputs updatedConfig={updatedConfig} handleColorChange={handleColorChange} themeStyle={themeStyle} />
+
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4, gap: 1 }}>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={resetThemeConfig}
+          sx={{
+            px: 4,
+            py: 1.5,
+            fontWeight: 600,
+            textTransform: 'none',
+            boxShadow: 1,
+            '&:hover': { boxShadow: 2 },
+          }}
+        >
+          Reset to Default
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleSave}
+          sx={{
+            px: 4,
+            py: 1.5,
+            fontWeight: 600,
+            textTransform: 'none',
+            boxShadow: 1,
+            '&:hover': { boxShadow: 2 },
+          }}
+        >
+          Save Changes
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default ThemeEditor;

package/src/common/themeProvider/ThemeProvider.jsx

@@ -0,0 +1,210 @@
+import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { execute } from '@/common/services/QueryBuilder';
+import { updateThemeConfig, setIsLoadingTheme } from '@/store/reducers/ThemeReducer';
+
+import { lightThemeConfig, darkThemeConfig } from '@/common/themeProvider/themeConfig';
+
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+
+const THEME_SOURCE_KEYS = {
+  personalized: 'userTheme',
+  implementation: 'implementationTheme',
+};
+
+const getStoredThemeCache = () => {
+  try {
+    const cache = JSON.parse(localStorage.getItem('theme_config') || '{}');
+    if (cache.theme && !cache.userTheme && !cache.implementationTheme) {
+      const migratedKey = cache.personalized ? THEME_SOURCE_KEYS.personalized : THEME_SOURCE_KEYS.implementation;
+      return {
+        ...cache,
+        [migratedKey]: cache.theme,
+      };
+    }
+    return cache;
+  } catch {
+    return {};
+  }
+};
+
+const setStoredThemeCache = (cache) => {
+  const cacheWithoutLegacyTheme = { ...cache };
+  delete cacheWithoutLegacyTheme.theme;
+  localStorage.setItem('theme_config', JSON.stringify(cacheWithoutLegacyTheme));
+};
+
+const mergeWithBaseTheme = (mode, config) => {
+  const baseConfig = mode === 'dark' ? darkThemeConfig : lightThemeConfig;
+  return {
+    ...baseConfig,
+    ...config,
+    palette: {
+      ...baseConfig.palette,
+      ...config?.palette,
+    },
+  };
+};
+
+const ThemeProvider = ({ children }) => {
+  const env = GeneralUtil.getEnv();
+  const isLoading = useSelector((state) => state.loading.isLoading);
+  const personilizedThemes = useSelector((state) => state.theme.personilizedThemes);
+  const isThemeLoading = useSelector((state) => state.theme.isThemeLoading);
+  const { user, isLoggedIn } = useSelector((state) => state.Authenticate);
+  const { mode, configs } = useSelector((state) => state.theme);
+  const [cachedCustomPalette, setCachedCustomPalette] = useState(null);
+  const dispatch = useDispatch();
+
+  const applyThemeConfig = (theme) => {
+    const fetchedTheme = typeof theme === 'string' ? JSON.parse(theme) : theme;
+    Object.entries(fetchedTheme || {}).forEach(([mode, config]) => {
+      dispatch(
+        updateThemeConfig({
+          themeType: mode,
+          config: mergeWithBaseTheme(mode, config),
+        })
+      );
+    });
+  };
+
+  const fetchThemeBySource = async (usePersonalizedTheme) => {
+    const response = await execute(
+      usePersonalizedTheme
+        ? {
+            code: 'get_user_theme_config',
+            parameters: {
+              user_id: user?.id,
+            },
+          }
+        : {
+            code: 'GET_IMPLEMENTATION_THEME_CONFIG',
+            parameters: {
+              implementation: env,
+            },
+          }
+    );
+
+    return response?.data?.result?.[0]?.theme || null;
+  };
+
+  const fetchUserThemeConfigDetails = async () => {
+    try {
+      if (isThemeLoading) return;
+
+      const usePersonalizedTheme = Boolean(personilizedThemes);
+      const cacheKey = usePersonalizedTheme ? THEME_SOURCE_KEYS.personalized : THEME_SOURCE_KEYS.implementation;
+      const themeCache = getStoredThemeCache();
+
+      if (themeCache[cacheKey]) {
+        applyThemeConfig(themeCache[cacheKey]);
+        return;
+      }
+
+      const fetchedTheme = await (async () => {
+        dispatch(setIsLoadingTheme(true));
+        try {
+          return await fetchThemeBySource(usePersonalizedTheme);
+        } finally {
+          dispatch(setIsLoadingTheme(false));
+        }
+      })();
+
+      if (fetchedTheme) {
+        setStoredThemeCache({
+          ...themeCache,
+          personalized: usePersonalizedTheme,
+          [cacheKey]: fetchedTheme,
+        });
+        applyThemeConfig(fetchedTheme);
+      } else {
+        setStoredThemeCache({
+          ...themeCache,
+          personalized: usePersonalizedTheme,
+          [cacheKey]: null,
+        });
+
+        dispatch(
+          updateThemeConfig({
+            themeType: 'light',
+            config: lightThemeConfig,
+          })
+        );
+        dispatch(
+          updateThemeConfig({
+            themeType: 'dark',
+            config: darkThemeConfig,
+          })
+        );
+      }
+    } catch (error) {
+      console.error('Error fetching user theme:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (user?.id && isLoggedIn) {
+      fetchUserThemeConfigDetails();
+    }
+  }, [user?.id, isLoggedIn, personilizedThemes]);
+
+  useEffect(() => {
+    const custom = configs[mode]?.palette?.custom;
+    if (custom) {
+      setCachedCustomPalette(custom);
+    }
+  }, [mode, configs]);
+
+  const theme = useMemo(() => {
+    const baseTheme = createTheme(configs[mode]);
+    if (cachedCustomPalette) {
+      baseTheme.palette.custom = cachedCustomPalette;
+    }
+    return baseTheme;
+  }, [mode, configs, cachedCustomPalette]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const palette = theme.palette;
+
+    root.style.setProperty('--color-primary', palette.primary.main);
+    root.style.setProperty('--color-secondary', palette.secondary.main);
+    root.style.setProperty('--color-error', palette.error.main);
+    root.style.setProperty('--color-success', palette.success.main);
+    root.style.setProperty('--color-warning', palette.warning.main);
+    root.style.setProperty('--color-info', palette.info.main);
+    root.style.setProperty('--color-background', palette.background.default);
+    root.style.setProperty('--color-background2', palette.background.paper);
+    root.style.setProperty('--color-text', palette.text.primary);
+    // custom colors
+    root.style.setProperty('--color-tableHeader', palette.custom.tableHeader);
+    root.style.setProperty('--color-black1', palette.custom.black1);
+    root.style.setProperty('--color-black2', palette.custom.black2);
+    root.style.setProperty('--color-gray1', palette.custom.gray1);
+    root.style.setProperty('--color-gray2', palette.custom.gray2);
+    root.style.setProperty('--color-gray3', palette.custom.gray3);
+    root.style.setProperty('--color-gray4', palette.custom.gray4);
+    root.style.setProperty('--color-customBlue', palette.custom.customBlue);
+  }, [theme]);
+
+  return (
+    <MUIThemeProvider theme={theme}>
+      <CssBaseline />
+      {isLoading && (
+        <div className="loader-overlay">
+          <div className="loader-spinner"></div>
+        </div>
+      )}
+      {children}
+    </MUIThemeProvider>
+  );
+};
+
+ThemeProvider.propTypes = {
+  children: PropTypes.any,
+};
+
+export default ThemeProvider;