@asaleh37/ui-base 1.1.8 → 1.2.0

package/package.json

@@ -1,113 +1,113 @@
-{
-  "name": "@asaleh37/ui-base",
-  "version": "1.1.8",
-  "description": "",
-  "license": "ISC",
-  "author": "Ahmed Saleh Mohamed",
-  "type": "commonjs",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
-    "dev": "vite"
-  },
-  "devDependencies": {
-    "@emotion/cache": "^11.14.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@eslint/js": "^9.19.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@hookform/resolvers": "^4.1.0",
-    "@mui/icons-material": "^6.4.8",
-    "@mui/material": "^6.4.4",
-    "@mui/x-charts": "^7.27.0",
-    "@mui/x-data-grid-premium": "^8.3.0",
-    "@mui/x-date-pickers": "^7.27.0",
-    "@mui/x-license": "^8.3.0",
-    "@mui/x-tree-view": "^7.26.0",
-    "@react-spring/web": "^9.7.5",
-    "@reduxjs/toolkit": "^2.5.1",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.0.3",
-    "@types/react-i18next": "^7.8.3",
-    "@vitejs/plugin-react": "^4.3.4",
-    "axios": "^1.8.1",
-    "eslint": "^9.19.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
-    "globals": "^15.14.0",
-    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.3",
-    "i18next-http-backend": "^3.0.2",
-    "moment": "^2.30.1",
-    "oidc-client-ts": "^3.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.4.0",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.1.5",
-    "react-toastify": "^11.0.5",
-    "rollup": "^4.41.1",
-    "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "stylis": "^4.3.6",
-    "stylis-plugin-rtl": "^2.1.1",
-    "tslib": "^2.8.1",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0",
-    "zod": "^3.24.2"
-  },
-  "peerDependencies": {
-    "@emotion/cache": "^11.14.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@hookform/resolvers": "^4.1.0",
-    "@mui/icons-material": "^6.4.8",
-    "@mui/material": "^6.4.4",
-    "@mui/x-charts": "^7.27.0",
-    "@mui/x-data-grid-premium": "^8.3.0",
-    "@mui/x-date-pickers": "^7.27.0",
-    "@mui/x-license": "^8.3.0",
-    "@mui/x-tree-view": "^7.26.0",
-    "@react-spring/web": "^9.7.5",
-    "@reduxjs/toolkit": "^2.5.1",
-    "axios": "^1.8.1",
-    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.3",
-    "i18next-http-backend": "^3.0.2",
-    "moment": "^2.30.1",
-    "oidc-client-ts": "^3.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.4.0",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.1.5",
-    "react-toastify": "^11.0.5",
-    "rollup": "^4.41.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "stylis": "^4.3.6",
-    "stylis-plugin-rtl": "^2.1.1",
-    "zod": "^3.24.2"
-  },
-  "dependencies": {
-    "@rollup/plugin-json": "^6.1.0"
-  }
-}
+{
+  "name": "@asaleh37/ui-base",
+  "version": "1.2.0",
+  "description": "",
+  "license": "ISC",
+  "author": "Ahmed Saleh Mohamed",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "dev": "vite"
+  },
+  "devDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@eslint/js": "^9.19.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^4.1.0",
+    "@mui/icons-material": "^6.4.8",
+    "@mui/material": "^6.4.4",
+    "@mui/x-charts": "^7.27.0",
+    "@mui/x-data-grid-premium": "^8.3.0",
+    "@mui/x-date-pickers": "^7.27.0",
+    "@mui/x-license": "^8.3.0",
+    "@mui/x-tree-view": "^7.26.0",
+    "@react-spring/web": "^9.7.5",
+    "@reduxjs/toolkit": "^2.5.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.0.3",
+    "@types/react-i18next": "^7.8.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "axios": "^1.8.1",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-http-backend": "^3.0.2",
+    "moment": "^2.30.1",
+    "oidc-client-ts": "^3.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.5",
+    "react-toastify": "^11.0.5",
+    "rollup": "^4.41.1",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "stylis": "^4.3.6",
+    "stylis-plugin-rtl": "^2.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0",
+    "zod": "^3.24.2"
+  },
+  "peerDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^4.1.0",
+    "@mui/icons-material": "^6.4.8",
+    "@mui/material": "^6.4.4",
+    "@mui/x-charts": "^7.27.0",
+    "@mui/x-data-grid-premium": "^8.3.0",
+    "@mui/x-date-pickers": "^7.27.0",
+    "@mui/x-license": "^8.3.0",
+    "@mui/x-tree-view": "^7.26.0",
+    "@react-spring/web": "^9.7.5",
+    "@reduxjs/toolkit": "^2.5.1",
+    "axios": "^1.8.1",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-http-backend": "^3.0.2",
+    "moment": "^2.30.1",
+    "oidc-client-ts": "^3.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.5",
+    "react-toastify": "^11.0.5",
+    "rollup": "^4.41.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "stylis": "^4.3.6",
+    "stylis-plugin-rtl": "^2.1.1",
+    "zod": "^3.24.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-json": "^6.1.0"
+  }
+}

package/rollup.config-1748377725725.cjs

@@ -1,16 +1,16 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var resolve = require('@rollup/plugin-node-resolve');
-var commonjs = require('@rollup/plugin-commonjs');
-var typescript = require('@rollup/plugin-typescript');
-var dts = require('rollup-plugin-dts');
-var terser = require('@rollup/plugin-terser');
-var json = require('@rollup/plugin-json');
-var peerDepsExternal = require('rollup-plugin-peer-deps-external');
-var postcss = require('rollup-plugin-postcss');
-
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var resolve = require('@rollup/plugin-node-resolve');
+var commonjs = require('@rollup/plugin-commonjs');
+var typescript = require('@rollup/plugin-typescript');
+var dts = require('rollup-plugin-dts');
+var terser = require('@rollup/plugin-terser');
+var json = require('@rollup/plugin-json');
+var peerDepsExternal = require('rollup-plugin-peer-deps-external');
+var postcss = require('rollup-plugin-postcss');
+
 const packageJson = require("./package.json");
 
 var rollup_config = [
@@ -45,6 +45,6 @@ var rollup_config = [
     plugins: [dts.default()],
     external: [/\.css$/],
   },
-];
-
-exports.default = rollup_config;
+];
+
+exports.default = rollup_config;

package/src/components/App.tsx

@@ -1,14 +1,74 @@
 import { useDispatch, useSelector } from "react-redux";
-import { createTheme } from "@mui/material";
+import { createTheme, ThemeOptions } from "@mui/material";
 import { ThemeProvider } from "@emotion/react";
 import React, { useEffect } from "react";
 import { RootState } from "../redux/store";
-import { LightThemeOptions } from "../theme/LightThemeOptions";
-import { DarkThemeOptions } from "../theme/DarkThemeOptions";
 import Layout from "../layout/Layout";
 import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
+import { LicenseInfo } from "@mui/x-license";
 
 const App: React.FC<AppInfo> = (props: AppInfo) => {
+  LicenseInfo.setLicenseKey(props.muiPremiumKey);
+  const LightThemeOptions: ThemeOptions = {
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+        /* Custom Scrollbar */
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: ${props.appTheme.light.primaryColor} #ffffff;
+        }
+  
+        /* Webkit Browsers */
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 10px;
+        }   
+      `,
+      },
+    },
+    palette: {
+      mode: "light",
+      primary: {
+        main: props.appTheme.light.primaryColor,
+      },
+      secondary: {
+        main: props.appTheme.light.secondaryColor,
+      },
+      background: {
+        default: "#f5f5f5",
+        paper: "#f5f5f5",
+      },
+    },
+  };
+  const DarkThemeOptions: ThemeOptions = {
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+        /* Custom Scrollbar */
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: ${props.appTheme.dark.primaryColor} #121212;
+        }
+  
+        /* Webkit Browsers */
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 10px;
+        }   
+      `,
+      },
+    },
+    palette: {
+      mode: "dark",
+      primary: {
+        main: props.appTheme.dark.primaryColor,
+      },
+      secondary: {
+        main: props.appTheme.dark.secondaryColor,
+      },
+    },
+  };
   const dispatch = useDispatch();
   const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
   let themeOptions = { ...LightThemeOptions };

package/src/components/BaseApp.tsx

@@ -5,21 +5,23 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import "../styles/index.css";
-import { LicenseInfo } from "@mui/x-license";
-
-LicenseInfo.setLicenseKey(
-  "c2bd611fa642666253500ab9c8e4f78fTz0xMTE4MjEsRT0xNzc2OTg4Nzk5MDAwLFM9cHJlbWl1bSxMTT1zdWJzY3JpcHRpb24sUFY9aW5pdGlhbCxLVj0y"
-);
 import "react-toastify/dist/ReactToastify.css";
 import App from "./App";
 import { AppInfo } from "../redux/features/common/AppInfoSlice";
 import { commonStoresInitialState } from "../redux/features/common/CommonStoreSlice";
+import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
 
 library.add(fab);
 library.add(far);
 library.add(fas);
 
 export const BaseApp: React.FC<AppInfo> = (props) => {
+  if (props.enableAdministrationModule) {
+    for (let adminStoreKey of Object.keys(ADMINISTRATION_STORES)) {
+      commonStoresInitialState[adminStoreKey] =
+        ADMINISTRATION_STORES[adminStoreKey];
+    }
+  }
   if (props?.businessCommonStoresMetaData) {
     for (let businessStoreKey of Object.keys(
       props.businessCommonStoresMetaData

package/src/components/common/Login.tsx

@@ -14,7 +14,6 @@ import axios from "axios";
 import { toast } from "react-toastify";
 import { RootState } from "../../redux/store";
 import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
-import { DarkThemeOptions } from "../../theme/DarkThemeOptions";
 
 const Login: React.FC = () => {
   const appInfo = useSelector((state: RootState) => state.AppInfo.value);
@@ -67,7 +66,34 @@ const Login: React.FC = () => {
   const userSession = useSelector(
     (state: RootState) => state.UserSession.value
   );
-  const loginTheme = createTheme(DarkThemeOptions);
+  const loginTheme = createTheme({
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+        /* Custom Scrollbar */
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: ${appInfo.appTheme.dark.primaryColor} #121212;
+        }
+  
+        /* Webkit Browsers */
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 10px;
+        }   
+      `,
+      },
+    },
+    palette: {
+      mode: "dark",
+      primary: {
+        main: appInfo.appTheme.dark.primaryColor,
+      },
+      secondary: {
+        main: appInfo.appTheme.dark.secondaryColor,
+      },
+    },
+  });
   const checkUserSession = async () => {
     if (appInfo?.apiBaseUrl) {
       if (userSession.isAuthenticated == null) {

package/src/layout/MainContent.tsx

@@ -9,6 +9,7 @@ import { SystemRoute } from "../routes/types";
 
 const MainContent: React.FC = () => {
   const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
+  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
   const businessRoutes = useSelector(
     (state: RootState) => state.AppInfo.value.businessRoutes
   );
@@ -28,15 +29,17 @@ const MainContent: React.FC = () => {
         }}
       >
         <Routes>
-          {SYSTEM_ROUTES.map((route: SystemRoute, index) => {
-            return (
-              <Route
-                key={"adm" + index}
-                path={route.path}
-                Component={route.component}
-              />
-            );
-          })}
+          {AppInfo.enableAdministrationModule
+            ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
+                return (
+                  <Route
+                    key={"adm" + index}
+                    path={route.path}
+                    Component={route.component}
+                  />
+                );
+              })
+            : null}
           {businessRoutes.map((route: SystemRoute, index) => {
             return (
               <Route

package/src/layout/NavigationTree.tsx

@@ -232,9 +232,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
 export default function NavigationTree() {
   const navigate = useNavigate();
   const appLayoutState = useSelector((state: RootState) => state.AppLayout);
-  const businessNavigationItems = useSelector(
-    (state: RootState) => state.AppInfo.value.businessNavigationItems
-  );
+  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
   const dispatch = useDispatch();
   const isMobile = useIsMobile();
   const { isUserAuthorized } = useSession();
@@ -254,18 +252,21 @@ export default function NavigationTree() {
       });
   };
 
-  const mergedNavigationItems = [
-    ...NavigationItems,
-    ...businessNavigationItems,
-  ];
-
+  const mergedNavigationItems = [];
+  if (AppInfo.enableAdministrationModule) {
+    mergedNavigationItems.push(...NavigationItems);
+  }
+  mergedNavigationItems.push(...AppInfo.businessNavigationItems);
   const authoriedNavigationItems = filterData(mergedNavigationItems);
 
   return (
     <RichTreeView
       items={authoriedNavigationItems}
       onItemClick={(event, itemId) => {
-        const navigationItem = findNavigationItemById(itemId, NavigationItems);
+        const navigationItem = findNavigationItemById(
+          itemId,
+          mergedNavigationItems
+        );
         if (
           navigationItem?.action === "NAVIGATION" &&
           navigationItem?.actionPayload != null &&

package/src/redux/features/common/AppInfoSlice.ts

@@ -13,6 +13,12 @@ export type AppInfo = {
   businessNavigationItems: Array<ExtendedTreeItemProps>;
   businessReduxReducers: { [key: string]: Reducer<any> };
   businessCommonStoresMetaData: { [key: string]: StoreMetaData };
+  muiPremiumKey: string;
+  enableAdministrationModule: boolean;
+  appTheme: {
+    light: { primaryColor: string; secondaryColor: string };
+    dark: { primaryColor: string; secondaryColor: string };
+  };
 };
 
 export type AppInfoProp = {
@@ -26,10 +32,16 @@ const initialState: AppInfoProp = {
     appName: null,
     appVersion: null,
     appLogo: null,
+    muiPremiumKey: null,
+    enableAdministrationModule: false,
     businessRoutes: [],
     businessNavigationItems: [],
     businessReduxReducers: {},
     businessCommonStoresMetaData: {},
+    appTheme: {
+      light: { primaryColor: "#37505C", secondaryColor: "#ff6d00" },
+      dark: { primaryColor: "#ea690e", secondaryColor: "#74776B" },
+    },
   },
 };
 

package/src/redux/features/common/CommonStoreSlice.ts

@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { ADMINISTRATION_STORES } from "../administration/AdministrationStoresMetaData";
 
 export interface CommonStoresInterface {
   [key: string]: StoreMetaData;
@@ -17,9 +16,7 @@ export interface StoreMetaData {
   authority?: string;
 }
 
-export const commonStoresInitialState: CommonStoresInterface = {
-  ...ADMINISTRATION_STORES,
-};
+export const commonStoresInitialState: CommonStoresInterface = {};
 
 const commonStoreSlice = createSlice({
   name: "loadingMask",

package/src/theme/DarkThemeOptions.ts

@@ -1,30 +0,0 @@
-import { ThemeOptions } from "@mui/material";
-
-export const DarkThemeOptions: ThemeOptions = {
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: `
-      /* Custom Scrollbar */
-      * {
-        scrollbar-width: thin;
-        scrollbar-color: #ea690e #121212;
-      }
-
-      /* Webkit Browsers */
-      *::-webkit-scrollbar {
-        width: 12px;
-        height: 10px;
-      }   
-    `,
-    },
-  },
-  palette: {
-    mode: "dark",
-    primary: {
-      main: "#ea690e",
-    },
-    secondary: {
-      main: "#74776B",
-    },
-  },
-};

package/src/theme/LightThemeOptions.ts

@@ -1,34 +0,0 @@
-import { ThemeOptions } from "@mui/material";
-
-export const LightThemeOptions: ThemeOptions = {
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: `
-      /* Custom Scrollbar */
-      * {
-        scrollbar-width: thin;
-        scrollbar-color: #37505C #ffffff;
-      }
-
-      /* Webkit Browsers */
-      *::-webkit-scrollbar {
-        width: 12px;
-        height: 10px;
-      }   
-    `,
-    },
-  },
-  palette: {
-    mode: "light",
-    primary: {
-      main: "#37505C",
-    },
-    secondary: {
-      main: "#ff6d00",
-    },
-    background: {
-      default: "#f5f5f5",
-      paper: "#f5f5f5",
-    },
-  },
-};