@asaleh37/ui-base 25.8.31 → 25.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.8.31",
+  "version": "25.9.3",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",
@@ -113,7 +113,9 @@
     "stylis-plugin-rtl": "^2.1.1",
     "zod": "^3.24.2"
   },
-  "dependencies": {    
+  "dependencies": {
+    "@azure/msal-browser": "^4.21.1",
+    "@azure/msal-react": "^3.0.19",
     "@rollup/plugin-json": "^6.1.0",
     "rollup-plugin-terser": "^7.0.2"
   }

package/src/components/App.tsx

@@ -13,9 +13,18 @@ import {
 } from "../util";
 import { setStoresMetaData } from "../redux/features/common/CommonStoreSlice";
 import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
+import { PublicClientApplication } from "@azure/msal-browser";
+import { MsalProvider } from "@azure/msal-react";
 
 const App: React.FC<AppInfo> = (props: AppInfo) => {
   const dispatch = useDispatch();
+  const msalInstance = new PublicClientApplication({
+    auth: {
+      clientId: props?.azureConfiguration?.frontEndClientId,
+      authority: `https://login.microsoftonline.com/${props?.azureConfiguration?.tenantId}`,
+      redirectUri: props?.azureConfiguration?.redirectURL,
+    },
+  });
   LicenseInfo.setLicenseKey(props.muiPremiumKey);
   const LightThemeOptions: ThemeOptions = {
     components: {
@@ -115,7 +124,13 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
   }, [props]);
   return (
     <ThemeProvider theme={theme}>
-      <Layout />
+      {props?.authenticationMethod === "AZURE" ? (
+        <MsalProvider instance={msalInstance}>
+          <Layout msalInstance={msalInstance} />
+        </MsalProvider>
+      ) : (
+        <Layout msalInstance={msalInstance} />
+      )}
     </ThemeProvider>
   );
 };

package/src/components/common/AzureLogin.tsx

@@ -0,0 +1,70 @@
+import { PublicClientApplication } from "@azure/msal-browser";
+import { Box, Button } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { AppInfo } from "../../redux/features/common/AppInfoSlice";
+import { useAxios } from "../../hooks";
+import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
+import { useEffect } from "react";
+
+interface AzureLoginProps {
+  msalInstance: PublicClientApplication;
+}
+
+const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const userSession = useSelector((state: any) => state.UserSession.value);
+  const { handleGetRequest } = useAxios();
+  const dispatch = useDispatch();
+  const checkUserSession = async () => {
+    if (appInfo?.apiBaseUrl) {
+      if (userSession.isAuthenticated == null) {
+        const token = localStorage.getItem("TOKEN");
+        handleGetRequest({
+          endPointURI: "api/auth/userInfo",
+          showMask: true,
+          successCallBkFn: (response) => {
+            if (response != null && response.data != null) {
+              const UserSession = {
+                ...response.data,
+                isAuthenticated: true,
+              };
+              dispatch(UserSessionActions.setAuthenticated(UserSession));
+            } else {
+              dispatch(UserSessionActions.setUnAuthenticated());
+              localStorage.removeItem("TOKEN");
+            }
+          },
+        });
+      }
+    }
+  };
+  const handleLogin = async () => {
+    const response = await msalInstance.acquireTokenPopup({
+      scopes: appInfo?.azureConfiguration?.scopes,
+    });
+    if (response?.accessToken) {
+      localStorage.setItem("TOKEN", response.accessToken);
+      checkUserSession();
+    }
+  };
+  const getUserInfo = async () => {
+    const response = await handleGetRequest({
+      endPointURI: "api/auth/userInfo",
+      showMask: true,
+      successCallBkFn: (response) => {
+        console.log(response);
+      },
+    });
+  };
+
+  // useEffect(()=>{
+  //   handleLogin()
+  // },[])
+  return (
+    <Box>
+      <Button onClick={handleLogin}>Azure Login </Button>
+    </Box>
+  );
+};
+
+export default AzureLogin;

package/src/components/common/Login.tsx

@@ -16,10 +16,13 @@ import { UserSessionActions } from "../../redux/features/common/UserSessionSlice
 import {
   DARK_THEME_INITIAL_MAIN_COLOR,
   DARK_THEME_INITIAL_SECANDARY_COLOR,
+  LIGHT_THEME_INITIAL_MAIN_COLOR,
+  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
 } from "../../util";
+import { AppInfo } from "../../redux/features/common/AppInfoSlice";
 
 const Login: React.FC = () => {
-  const appInfo = useSelector((state: any) => state.AppInfo.value);
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoginInProcess, setIsLoginInProcess] = useState(false);
@@ -89,15 +92,22 @@ const Login: React.FC = () => {
       },
     },
     palette: {
-      mode: "dark",
+      mode: appInfo?.loginScreenStyle?.themeMode || "dark",
       primary: {
         main:
-          appInfo.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
+          appInfo?.loginScreenStyle?.themeMode === "light"
+            ? appInfo.appTheme?.light?.primaryColor ||
+              LIGHT_THEME_INITIAL_MAIN_COLOR
+            : appInfo.appTheme?.dark?.primaryColor ||
+              DARK_THEME_INITIAL_MAIN_COLOR,
       },
       secondary: {
         main:
-          appInfo.appTheme?.dark?.secondaryColor ||
-          DARK_THEME_INITIAL_SECANDARY_COLOR,
+          appInfo?.loginScreenStyle?.themeMode === "light"
+            ? appInfo.appTheme?.light?.secondaryColor ||
+              LIGHT_THEME_INITIAL_SECANDARY_COLOR
+            : appInfo.appTheme?.dark?.secondaryColor ||
+              DARK_THEME_INITIAL_SECANDARY_COLOR,
       },
     },
   });
@@ -121,6 +131,7 @@ const Login: React.FC = () => {
             dispatch(UserSessionActions.setAuthenticated(UserSession));
           } else {
             dispatch(UserSessionActions.setUnAuthenticated());
+            localStorage.removeItem("TOKEN");
           }
         } catch (error) {
           dispatch(UserSessionActions.setUnAuthenticated());
@@ -136,85 +147,101 @@ const Login: React.FC = () => {
 
   return (
     <ThemeProvider theme={loginTheme}>
-      <Paper
+      <Box
         sx={{
-          display: "flex",
-          height: "100vh",
+          minHeight: "100vh", // full page height
           width: "100%",
-          borderRadius: 0,
+          display: "flex",
           alignItems: "center",
           justifyContent: "center",
+          background: appInfo?.loginScreenStyle?.backgroundColor,
+          backgroundImage: `url('/${appInfo?.loginScreenStyle?.backgroundImageNameInPublicFolder}')`,
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover", // 🔥 makes it responsive
+          backgroundPosition: "center", // keeps it centered
         }}
       >
-        {UserSessionState.isAuthenticated == false ? (
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <img src={appInfo?.appLogo} width={150} height={150} />
-            <Typography sx={{ m: 1 }} variant="h4" color="textSecondary">
-              {appInfo?.appName}
-            </Typography>
-            <Typography
+        <Paper
+          sx={{
+            display: "flex",
+            width: "fit-content",
+            padding: 2,
+            height: "fit-content",
+            borderRadius: 5,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {UserSessionState.isAuthenticated == false ? (
+            <Box
               sx={{
-                paddingRight: 1,
-                width: "100%",
-                textAlign: "right",
-                fontSize: 10,
-              }}
-              variant="caption"
-              color="textSecondary"
-            >
-              V.{appInfo.appVersion}
-            </Typography>
-            <TextField
-              label="username"
-              sx={{ width: 300, m: 1 }}
-              value={username}
-              onChange={(event) => {
-                setUsername(event.target.value);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  handleLogin();
-                }
-              }}
-            />
-            <TextField
-              label="password"
-              sx={{ width: 300, m: 1 }}
-              value={password}
-              type="password"
-              onChange={(event) => {
-                setPassword(event.target.value);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  handleLogin();
-                }
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
               }}
-            />
-            <Button
-              loading={isLoginInProcess}
-              onClick={handleLogin}
-              variant="contained"
-              color="primary"
-              sx={{ m: 1 }}
             >
-              login
-            </Button>
-          </Box>
-        ) : (
-          <>
-            <CircularProgress sx={{ marginRight: 1 }} />
-            <div>You will be redirected shortly ... please wait</div>
-          </>
-        )}
-      </Paper>
+              <img src={appInfo?.appLogo} width={150} height={150} />
+              <Typography sx={{ m: 1 }} variant="h4" color="textSecondary">
+                {appInfo?.appName}
+              </Typography>
+              <Typography
+                sx={{
+                  paddingRight: 1,
+                  width: "100%",
+                  textAlign: "right",
+                  fontSize: 10,
+                }}
+                variant="caption"
+                color="textSecondary"
+              >
+                V.{appInfo.appVersion}
+              </Typography>
+              <TextField
+                label="username"
+                sx={{ width: 300, m: 1 }}
+                value={username}
+                onChange={(event) => {
+                  setUsername(event.target.value);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    handleLogin();
+                  }
+                }}
+              />
+              <TextField
+                label="password"
+                sx={{ width: 300, m: 1 }}
+                value={password}
+                type="password"
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    handleLogin();
+                  }
+                }}
+              />
+              <Button
+                loading={isLoginInProcess}
+                onClick={handleLogin}
+                variant="contained"
+                color="primary"
+                sx={{ m: 1 }}
+              >
+                login
+              </Button>
+            </Box>
+          ) : (
+            <>
+              <CircularProgress sx={{ marginRight: 1 }} />
+              <div>You will be redirected shortly ... please wait</div>
+            </>
+          )}
+        </Paper>
+      </Box>
     </ThemeProvider>
   );
 };

package/src/components/msalConfig.ts

@@ -0,0 +1,11 @@
+import { PublicClientApplication } from "@azure/msal-browser";
+
+export const msalConfig = {
+  auth: {
+    clientId: "your-frontend-client-id",
+    authority: "https://login.microsoftonline.com/<tenant-id>",
+    redirectUri: "http://localhost:3000"
+  }
+};
+
+export const msalInstance = new PublicClientApplication(msalConfig);

package/src/hooks/useAxios.tsx

@@ -64,6 +64,7 @@ const useAxios = () => {
           : false
       ) {
         dispatch(UserSessionActions.setUnAuthenticated());
+        localStorage.removeItem("TOKEN");
         toast.error("your session is now expired, you need to login again", {
           autoClose: false,
         });

package/src/layout/Layout.tsx

@@ -14,6 +14,9 @@ import { UserSessionProps } from "../redux/features/common/UserSessionSlice";
 import LoadingMask from "../components/common/LoadingMask";
 import Login from "../components/common/Login";
 import NoLicenseComponent from "../components/common/NoLicenseComponent";
+import { msalInstance } from "../components/msalConfig";
+import { PublicClientApplication } from "@azure/msal-browser";
+import AzureLogin from "../components/common/AzureLogin";
 
 const Main = styled("main", {
   shouldForwardProp: (prop) => prop !== "open",
@@ -53,9 +56,13 @@ const Main = styled("main", {
   };
 });
 
-export default function Layout() {
-  const SideBarState = useSelector((state: any) => state.SideBar);
+interface LayoutProps {
+  msalInstance: PublicClientApplication;
+}
 
+const Layout: React.FC<LayoutProps> = ({ msalInstance }) => {
+  const SideBarState = useSelector((state: any) => state.SideBar);
+  const appInfo = useSelector((state: any) => state.AppInfo.value);
   const isMobile = useIsMobile();
   const UserSession: UserSessionProps = useSelector(
     (state: any) => state.UserSession
@@ -80,9 +87,13 @@ export default function Layout() {
           <MainContent />
           <NoLicenseComponent />
         </Main>
+      ) : appInfo.authenticationMethod === "AZURE" ? (
+        <AzureLogin msalInstance={msalInstance} />
       ) : (
         <Login />
       )}
     </BrowserRouter>
   );
-}
+};
+
+export default Layout;

package/src/layout/MainContent.tsx

@@ -107,11 +107,6 @@ const MainContent: React.FC = () => {
           })}
         </Routes>
       </Box>
-      )
-      {/* : (
-        <></>
-      )
-      } */}
     </CacheProvider>
   );
 };

package/src/layout/TopBar.tsx

@@ -102,6 +102,7 @@ const TopBar: React.FC = () => {
       await handleGetRequest({ endPointURI: "api/auth/logout" });
     } catch (error) {}
     dispatch(UserSessionActions.setUnAuthenticated());
+    localStorage.removeItem("TOKEN");
   };
   const toggleSideBar = () => {
     dispatch(toggleSideBarState());
@@ -169,7 +170,7 @@ const TopBar: React.FC = () => {
           <AttachmentImageViewer
             showAsAvatar={true}
             attachmentCode="ORGANIZATION_LOGOS"
-            refKey={UserSession.value.currentOrganization.id + ""}
+            refKey={UserSession?.value?.currentOrganization?.id + ""}
             onErrorImage="/logo.png"
             style={{
               marginRight: 1,

package/src/main.tsx

@@ -7,7 +7,18 @@ createRoot(document.getElementById("root")!).render(
     enableUINotifications={false}
     appLogo={"/logo.png"}
     appName="UI Base Library"
+    loginScreenStyle={{
+      themeMode: "light",
+      backgroundImageNameInPublicFolder: "bg.jpg",
+    }}
     appVersion="0.0"
+    authenticationMethod="APP"
+    azureConfiguration={{
+      frontEndClientId: "c3bbbdbd-f392-4459-b3dd-2351cb07f924",
+      tenantId: "9f136fef-4529-475f-98e6-d271eb04eb00",
+      redirectURL: "http://localhost:3000",
+      scopes: ["api://6008a934-2a32-4776-a3df-1842ac9371da/access_as_user"],
+    }}
     businessCommonStoresMetaData={{}}
     businessNavigationItems={[]}
     businessReduxReducers={{}}

package/src/navigationItems/index.tsx

@@ -31,12 +31,5 @@ export const findNavigationItemById = (
 };
 
 export const NavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
-  ...AdministrationItems,
-  {
-    icon: "user",
-    label: "Example Grid",
-    id: "example",
-    action: "NAVIGATION",
-    actionPayload: { path: "example" },
-  },
+  ...AdministrationItems
 ];

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

@@ -19,6 +19,18 @@ export type AppInfo = {
     ar: { [key: string]: string };
     en: { [key: string]: string };
   };
+  loginScreenStyle?: {
+    themeMode: "dark" | "light";
+    backgroundImageNameInPublicFolder?: string;
+    backgroundColor?: string;
+  };
+  authenticationMethod: "AZURE" | "APP";
+  azureConfiguration?: {
+    frontEndClientId: string;
+    tenantId: string;
+    redirectURL: string;
+    scopes: Array<string>;
+  };
   businessRoutes?: Array<SystemRoute>;
   businessNavigationItems?: Array<ExtendedTreeItemProps>;
   businessReduxReducers?: { [key: string]: Reducer<any> };
@@ -41,6 +53,7 @@ const initialState: AppInfoProp = {
   value: {
     documentTitle: null,
     apiBaseUrl: null,
+    authenticationMethod: "APP",
     appName: null,
     appVersion: null,
     appLogo: null,

package/src/routes/index.ts

@@ -1,9 +1,5 @@
-import Home from "../components/common/Home";
-import ExampleGrid from "../examples/ExampleGrid";
+
 import { ADMINISTRATION_ROUTES } from "./administration";
 import { SystemRoute } from "./types";
 
-export const SYSTEM_ROUTES: Array<SystemRoute> = [
-  ...ADMINISTRATION_ROUTES,
-  { path: "example", component: ExampleGrid },
-];
+export const SYSTEM_ROUTES: Array<SystemRoute> = [...ADMINISTRATION_ROUTES];

package/src/util/AppUtils.ts

@@ -1,4 +1,6 @@
+import moment from "moment";
 import { FormElementProps } from "../components";
+import { DATE_FORMAT } from "./constants";
 
 export function hasDigitsOnly(str: string) {
   return /^\d+$/.test(str);
@@ -53,3 +55,19 @@ export function timeAgo(dateInput, appDirection: "ltr" | "rtl") {
 
   return locale === "ar" ? "الآن" : "just now";
 }
+
+export const formatDate = (date, format) => {
+  if (format) {
+    return moment(date).format(format);
+  } else {
+    return moment(date).format(DATE_FORMAT);
+  }
+};
+
+export const parseStringToDate = (dateString, format) => {
+  if (format) {
+    return moment(dateString, format).toDate();
+  } else {
+    return moment(dateString, DATE_FORMAT).toDate();
+  }
+};