sevago-sso-fe 1.0.51 → 1.0.53

package/README.md

@@ -1,19 +1,26 @@
 # Sevago SSO Frontend Library
 
-A comprehensive Single Sign-On (SSO) frontend library built with React, TypeScript, and Material-UI. This library provides authentication components, utilities, and hooks for building SSO-enabled applications.
+<div align="center">
+
+A comprehensive Single Sign-On (SSO) frontend library built with React, TypeScript, and Material-UI.
+
+[![npm version](https://img.shields.io/npm/v/sevago-sso-fe)](https://www.npmjs.com/package/sevago-sso-fe)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+</div>
+
+---
 
 ## Features
 
-- 🔐 Complete authentication system with login, logout, and token management
 - 🎨 Material-UI components with custom styling and theming
 - 📱 Responsive design with mobile support
-- 🔄 Redux state management with persistence
-- 🌐 API integration with axios
-- 🔔 Real-time notifications with Firebase
-- 📊 Dashboard components and layouts
-- 🎯 TypeScript support with full type definitions
+- 🎯 Full TypeScript support
 - 🎭 Framer Motion animations
-- 🔌 Socket.io integration for real-time features
+- 📊 System monitoring components
+- 🔧 Utility functions and constants
+
+---
 
 ## Installation
 
@@ -21,15 +28,15 @@ A comprehensive Single Sign-On (SSO) frontend library built with React, TypeScri
 npm install sevago-sso-fe
 ```
 
-## Peer Dependencies
-
-This library requires the following peer dependencies to be installed in your project:
+### Peer Dependencies
 
 ```bash
-npm install react@>=17 react-dom@>=17 @emotion/react@>=11 @emotion/styled@>=11 @mui/material@>=5 @mui/system@>=5 @reduxjs/toolkit@^2.9.2 react-redux@^9.2.0 react-router-dom@^7.9.4 redux-persist@^6.0.0
+npm install react@^19.2.0 react-dom@^19.2.0 @emotion/react@>=11 @emotion/styled@>=11 @mui/material@>=5 @mui/system@>=5 @reduxjs/toolkit@^2.9.2 react-redux@^9.2.0 react-router-dom@^7.9.5 redux-persist@^6.0.0
 ```
 
-## Usage
+---
+
+## Quick Start
 
 ### Basic Setup
 
@@ -38,21 +45,14 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { BrowserRouter } from 'react-router-dom';
-import { 
-  App, 
-  store, 
-  persistor,
-  SnackbarProvider 
-} from 'sevago-sso-fe';
+import App from 'sevago-sso-fe';
 
 function RootApp() {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <BrowserRouter>
-          <SnackbarProvider>
-            <App />
-          </SnackbarProvider>
+          <App />
         </BrowserRouter>
       </PersistGate>
     </Provider>
@@ -62,303 +62,238 @@ function RootApp() {
 export default RootApp;
 ```
 
-### Using Individual Components
+---
 
-```tsx
-import { 
-  useSnackbar, 
-  useApps,
-  authApi,
-  userApi,
-  SystemMonitorScreen,
-  DashboardPage,
-  AuthPage
-} from 'sevago-sso-fe';
+## Usage
 
-function MyComponent() {
-  const { showSnackbar } = useSnackbar();
-  const { apps } = useApps();
+### Components
 
-  const handleLogin = async (credentials) => {
-    try {
-      const response = await authApi.login(credentials);
-      showSnackbar({ message: 'Login successful!', type: 'success' });
-    } catch (error) {
-      showSnackbar({ message: 'Login failed!', type: 'error' });
-    }
-  };
+#### App Component
 
-  return (
-    <div>
-      <SystemMonitorScreen />
-      {/* Your content */}
-    </div>
-  );
-}
+```tsx
+import App from 'sevago-sso-fe';
+
+<App />
 ```
 
-### Using Hooks
+#### System Monitor Screen
 
 ```tsx
-import { 
-  useSnackbar, 
-  useApps, 
-  useVersionCheck,
-  useUpdateCurrentAccess,
-  useActiveSidebar,
-  useAllApps,
-  useIsSystemMonitor,
-  useSidebarState,
-  useTagSelector,
-  useSidebar
-} from 'sevago-sso-fe';
-
-function MyComponent() {
-  const { showSnackbar } = useSnackbar();
-  const { apps, loading } = useApps();
-  const { updateAccess } = useUpdateCurrentAccess();
-  const { isActive } = useActiveSidebar();
-  const { allApps } = useAllApps();
-  const { isSystemMonitor } = useIsSystemMonitor();
-  const { sidebarState } = useSidebarState();
-  const { selectedTags, toggleTag } = useTagSelector();
-  const { sidebar } = useSidebar();
-  
-  // Version checking
-  useVersionCheck({ interval: 5 * 60 * 1000 });
+import { SystemMonitorScreen } from 'sevago-sso-fe';
 
-  return (
-    <div>
-      {loading ? 'Loading...' : apps.map(app => (
-        <div key={app.id}>{app.name}</div>
-      ))}
-    </div>
-  );
-}
+<SystemMonitorScreen />
 ```
 
-### Using API Services
+#### App Grid
 
 ```tsx
-import { authApi, userApi, notificationApi, orgUnitApi } from 'sevago-sso-fe';
+import { AppGrid } from 'sevago-sso-fe';
 
-// Authentication
-const loginResponse = await authApi.login({ email, password });
-const logoutResponse = await authApi.logout({ token });
+<AppGrid apps={apps} onAppClick={handleAppClick} loading={loading} />
+```
 
-// User management
-const user = await userApi.getUser(userId);
-const updatedUser = await userApi.updateAccount(userData);
+#### Sidebar Components
 
-// Notifications
-const notifications = await notificationApi.getListNotification(params);
-await notificationApi.subscribeTopic({ token });
+```tsx
+import { AppsSidebar, SystemMonitorSidebarPart } from 'sevago-sso-fe';
 
-// Organization units
-const orgUnits = await orgUnitApi.getOrgUnits();
+<AppsSidebar />
+<SystemMonitorSidebarPart />
 ```
 
-## API Reference
+#### UI Elements
 
-### Main App Component
-- `App` - Main application component with theme provider and routing
+```tsx
+import { 
+  ImageElement,
+  RadioElement,
+  TypographyContentCaption,
+  MotionBox
+} from 'sevago-sso-fe';
 
-### Pages
-- `AuthPage` - Authentication page
-- `DashboardPage` - Main dashboard page
-- `ErrorPage` - Error page
-- `NotFoundPage` - 404 not found page
+<ImageElement src="/path/to/image.jpg" alt="Image" />
+<RadioElement value="option1" checked={true} onChange={handleChange} />
+<TypographyContentCaption>Caption text</TypographyContentCaption>
+<MotionBox animate={{ opacity: 1 }}>Animated content</MotionBox>
+```
 
-### Dashboard Screens
-- `SystemMonitorScreen` - System monitoring dashboard screen
+### Constants
 
-### Layouts
-- `AuthLayout` - Authentication layout
-- `DashboardLayout` - Dashboard layout
-- `DefaultLayout` - Default layout
+#### Style Constants
 
-### Components
+```tsx
+import { STYLE, MODE, OPACITY } from 'sevago-sso-fe';
 
-#### Core Components
-- `AppGrid` - Application grid component
-- `AvatarElement` - Avatar element
-- `AvatarUserInfo` - User info avatar
-- `AvatarUserComponent` - User avatar component
-- `BellComponent` - Notification bell component
-- `EmptyComponent` - Empty state component
-- `LoadingComponent` - Loading component
-- `LogoComponent` - Logo component
-- `MotionBox` - Framer Motion box component
-- `TimeAgoContentComponent` - Time ago content
-- `TimeAgoComponent` - Time ago component
+const customStyle = {
+  padding: STYLE.PADDING_GAP_LAYOUT,
+  borderRadius: STYLE.BORDER_RADIUS_ELEMENT,
+  height: STYLE.HEIGHT_DEFAULT_TEXT_FIELD_BUTTON,
+};
+```
 
-#### UI Elements
-- `ButtonElement` - Custom button element
-- `IconElement` - Icon element
-- `ImageElement` - Image element
-- `RadioElement` - Radio button element
-- `TextFieldElement` - Text field element
-- `TooltipOnClickElement` - Tooltip on click element
-- `TypographyContentCaption` - Typography caption
-
-### Hooks
-- `useSnackbar()` - Snackbar notifications with SnackbarProvider
-- `useApps()` - Application management
-- `useActiveSidebar()` - Active sidebar state
-- `useAllApps()` - All applications access
-- `useIsSystemMonitor()` - System monitor check
-- `useSidebarState()` - Sidebar state management
-- `useTagSelector()` - Tag selection functionality
-- `useUpdateCurrentAccess()` - Access control updates
-- `useVersionCheck(options)` - Version checking
-- `useSidebar()` - Sidebar management
-
-### API Services
-- `authApi` - Authentication operations (login, logout, refresh token, etc.)
-- `userApi` - User management (get user, update account, etc.)
-- `notificationApi` - Notification handling (get notifications, subscribe topics, etc.)
-- `orgUnitApi` - Organization unit management
-
-### Redux Store
-- `store` - Redux store instance
-- `persistor` - Redux persist instance
-- `GlobalReduxState` - Global Redux state type
-
-#### Redux Slices
-- `remainingWeightSlice` - Remaining weight management
-- `account` - Account management (login, logout, reset password, refresh token, subscribe topic, unsubscribe topic, change notification count, change sidebar count, update account, get account, update position org unit, update current access)
-- `system` - System management (change mode, theme management)
-
-### Router Utilities
-- `renderRoutes` - Route rendering utility
-- `routes` - Route definitions
-- `routeConstants` - Route constants (ALLOW_USER_TYPES, BOOKING_SCREEN, DASHBOARD_SCREEN, etc.)
-- `RouteType` - Route type enum
-
-### Common Utilities
-
-#### Constants
-- `STYLE` - Style constants (padding, border radius, heights, etc.)
-- `MODE` - Theme modes (light, dark, other)
-- `OPACITY` - Opacity constants
-- `APPS_CONSTANT` - Application constants
-- `REG_EXP` - Regular expression constants
-- `TYPOGRAPHY` - Typography constants
-
-#### Utils
-- `timeUtils` - Time utility functions (getTimeAgo, getDateTime, getDate, checkNowYear, getMonthRangeForYear, getDayOffsetPx, isSameDateTime, getTimeDate, isDateString)
-- `stringUtils` - String utility functions
-- `findCurrentAccessHelper` - Access control helper
-- `otherUtils` - Other utility functions
-
-#### Configuration
-- `axiosConfig` - Axios configuration
-- `firebaseConfig` - Firebase configuration
-- `socketConfig` - Socket.io configuration
-
-## Configuration
-
-### Firebase Setup
-Configure Firebase for notifications:
+#### Theme Modes
 
 ```tsx
-import { initializeApp } from 'firebase/app';
-
-const firebaseConfig = {
-  // Your Firebase config
-  apiKey: "your-api-key",
-  authDomain: "your-auth-domain",
-  projectId: "your-project-id",
-  storageBucket: "your-storage-bucket",
-  messagingSenderId: "your-sender-id",
-  appId: "your-app-id"
-};
+import { MODE } from 'sevago-sso-fe';
+import { createTheme } from '@mui/material/styles';
 
-initializeApp(firebaseConfig);
+const theme = createTheme(MODE.light); // or MODE.dark or MODE.other
 ```
 
-### API Configuration
-Configure your API endpoints:
+#### Opacity Constants
 
 ```tsx
-import { axiosRequest } from 'sevago-sso-fe';
+import { MODE, OPACITY } from 'sevago-sso-fe';
 
-// Configure base URL
-axiosRequest.defaults.baseURL = 'https://your-api.com';
+const semiTransparent = `${MODE.light.palette.primary.main}${OPACITY[50]}`;
 ```
 
-### Environment Variables
-Set up the following environment variables:
+### Utilities
+
+#### Time Utils
 
-```env
-REACT_APP_FIREBASE_VAPID_KEY=your-vapid-key
-REACT_APP_API_BASE_URL=your-api-base-url
+```tsx
+import { timeUtils } from 'sevago-sso-fe';
+
+const timeAgo = timeUtils.getTimeAgo(new Date());
+const dateTime = timeUtils.getDateTime(new Date());
+const date = timeUtils.getDate(new Date());
 ```
 
-## Styling
+#### String Utils
 
-The library includes comprehensive styling constants and Material-UI theme customization:
+```tsx
+import { stringUtils } from 'sevago-sso-fe';
+
+// Use string utility functions
+```
+
+#### App Utils
 
 ```tsx
-import { STYLE, MODE, OPACITY } from 'sevago-sso-fe';
+import { appUtils } from 'sevago-sso-fe';
 
-// Use style constants
-const customStyle = {
-  padding: STYLE.PADDING_GAP_LAYOUT,
-  borderRadius: STYLE.BORDER_RADIUS_ELEMENT,
-  height: STYLE.HEIGHT_DEFAULT_TEXT_FIELD_BUTTON,
-};
+// Use app utility functions
+```
 
-// Use theme modes
-const theme = createTheme(MODE.light); // or MODE.dark or MODE.other
+### Enums
 
-// Use opacity constants
-const semiTransparent = `${MODE.light.palette.primary.main}${OPACITY[50]}`;
+```tsx
+import { AppCategory, Mode, OrderType } from 'sevago-sso-fe';
+
+// Use enums
+const category = AppCategory.ALL;
+const mode = Mode.LIGHT;
+const order = OrderType.ASC;
 ```
 
+---
+
+## API Reference
+
+### Components
+
+| Component | Description | Props |
+|-----------|-------------|-------|
+| `App` | Main application component with theme provider | None |
+| `SystemMonitorScreen` | System monitoring dashboard screen | - |
+| `AppGrid` | Application grid component | `apps`, `onAppClick`, `loading` |
+| `AppsSidebar` | Applications sidebar component | - |
+| `SystemMonitorSidebarPart` | System monitor sidebar part | - |
+| `ImageElement` | Image element | `src`, `alt`, `width`, `height` |
+| `RadioElement` | Radio button element | `value`, `checked`, `onChange` |
+| `TypographyContentCaption` | Typography caption component | `children`, `variant`, `color` |
+| `MotionBox` | Framer Motion animated box | `animate`, `transition`, `children` |
+
+### Constants
+
+- **`STYLE`** - Style constants (padding, border radius, heights, etc.)
+- **`MODE`** - Theme modes (light, dark, other)
+- **`OPACITY`** - Opacity constants (0-100)
+- **`REG_EXP`** - Regular expression constants
+- **`TYPOGRAPHY`** - Typography constants
+
+### Utilities
+
+- **`timeUtils`** - Time utility functions
+  - `getTimeAgo(date)`
+  - `getDateTime(date)`
+  - `getDate(date)`
+  - `checkNowYear(date)`
+  - `getMonthRangeForYear(year)`
+  - `getDayOffsetPx(day)`
+  - `isSameDateTime(date1, date2)`
+  - `getTimeDate(date)`
+  - `isDateString(str)`
+
+- **`stringUtils`** - String utility functions
+- **`appUtils`** - Application utility functions
+- **`getLimitLineCss`** - CSS utility for limiting lines
+
+### Enums
+
+- **`AppCategory`** - Application category enum
+- **`Mode`** - Theme mode enum
+- **`OrderType`** - Order type enum
+
+---
+
 ## TypeScript Support
 
-Full TypeScript support is included with comprehensive type definitions:
+Full TypeScript support with comprehensive type definitions:
 
 ```tsx
 import type { 
-  GlobalReduxState,
-  LoginDto, 
-  User, 
-  Notification,
-  SnackbarType,
-  RouteType
+  // Add your types here based on actual exports
 } from 'sevago-sso-fe';
 ```
 
+---
+
 ## Development
 
-To contribute to this library:
+### Prerequisites
 
-1. Clone the repository
-2. Install dependencies: `npm install`
-3. Run development server: `npm run dev`
-4. Build library: `npm run build:lib`
-5. Test the build: `npm run preview`
-6. Lint code: `npm run lint`
+- Node.js >= 16.x
+- npm >= 7.x
 
-## Changelog
+### Getting Started
+
+```bash
+# Clone the repository
+git clone https://github.com/dev1-gmail2025/sevago-sso-fe.git
+cd sevago-sso-fe
 
-### Version 1.0.23
-- Initial release with comprehensive SSO functionality
-- Complete authentication system
-- Material-UI integration with custom theming
-- Redux state management with persistence
-- Firebase notifications support
-- Dashboard and system monitoring components
-- TypeScript support throughout
-- Socket.io integration for real-time features
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build library
+npm run build:lib
+
+# Lint code
+npm run lint
+```
+
+---
 
 ## License
 
 MIT
 
-## Repository
+---
+
+## Support
+
+- **GitHub Issues:** [https://github.com/dev1-gmail2025/sevago-sso-fe/issues](https://github.com/dev1-gmail2025/sevago-sso-fe/issues)
+- **Repository:** [https://github.com/dev1-gmail2025/sevago-sso-fe](https://github.com/dev1-gmail2025/sevago-sso-fe)
+
+---
+
+<div align="center">
+
+**Made with ❤️ for the Sevago SSO ecosystem**
 
-- GitHub: https://github.com/dev1-gmail2025/sevago-sso-fe
-- Issues: https://github.com/dev1-gmail2025/sevago-sso-fe/issues
+</div>

package/dist/components/elements/icon/index.d.ts

@@ -1,2 +1 @@
-export { IconButtonElement } from './icon-button.element';
 export { IconElement } from './icon.element';

package/dist/components/elements/index.d.ts

@@ -1,5 +1,4 @@
 export { IconElement } from './icon';
 export { ImageElement } from './image';
 export { RadioElement } from './radio';
-export { TooltipOnClickElement } from './tooltip';
 export { TypographyContentCaption } from './typography';

package/dist/index.cjs.js

@@ -13768,10 +13768,12 @@ const AppGrid = ({
           gap: gap2
         },
         children: visibleApps.map((app, index) => {
+          const appUrl = app.path[env];
+          const absoluteUrl = appUrl.startsWith("https://") ? appUrl : `${window.location.origin}${appUrl.startsWith("/") ? appUrl : `/${appUrl}`}`;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
-              href: app.path[env],
+              href: absoluteUrl,
               target: "_blank",
               rel: "noopener noreferrer",
               style: {
@@ -14095,36 +14097,6 @@ const RadioElement = ({ name, label, ...rest }) => {
     }
   );
 };
-const TooltipOnClickElement = ({
-  open,
-  placement = "top",
-  content,
-  children,
-  onOpen,
-  onClose,
-  onClickAway,
-  ...rest
-}) => {
-  return (
-    // Chỗ này có thể là bug, onClickAway apply ngay cả khi component chưa được render
-    /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsxRuntime.jsx(
-      material.Tooltip,
-      {
-        PopperProps: { disablePortal: true },
-        open,
-        onOpen,
-        onClose,
-        disableFocusListener: true,
-        disableHoverListener: true,
-        disableTouchListener: true,
-        placement,
-        title: content,
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children })
-      }
-    ) })
-  );
-};
 const TypographyContentCaption = ({ content, caption, sx = {}, sxContent, sxCaption }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { gap: 0, sx: { ...sx }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -14234,9 +14206,11 @@ const SystemMonitorScreen = ({
             /* @__PURE__ */ jsxRuntime.jsx(MotionBox, { preset: "tabContent", children: /* @__PURE__ */ jsxRuntime.jsx(
               AppGrid,
               {
-                apps: Object.values(APP_OBJ).filter(
-                  (e) => !blacklist?.includes(e.path[env])
-                ),
+                apps: Object.values(APP_OBJ).filter((e) => {
+                  const isBlacklisted = !!blacklist?.includes(e.path[env]);
+                  const isInSelectedGroup = tab === AppGroup.ALL ? true : e.group === tab;
+                  return !isBlacklisted && isInSelectedGroup;
+                }),
                 iconSize: 80,
                 iconRadius: 7,
                 gap: PADDING_GAP_TAB,
@@ -14297,7 +14271,6 @@ exports.StyledTableCell = StyledTableCell;
 exports.SystemMonitorScreen = SystemMonitorScreen;
 exports.SystemMonitorSidebarPart = SystemMonitorSidebarPart;
 exports.TYPOGRAPHY_STYLES = TYPOGRAPHY_STYLES;
-exports.TooltipOnClickElement = TooltipOnClickElement;
 exports.TypographyContentCaption = TypographyContentCaption;
 exports.TypographyFilter = TypographyFilter;
 exports.checkNowYear = checkNowYear;