sevago-sso-fe 1.0.55 → 1.0.57

package/README.md

@@ -79,42 +79,193 @@ import App from 'sevago-sso-fe';
 #### System Monitor Screen
 
 ```tsx
-import { SystemMonitorScreen } from 'sevago-sso-fe';
+import { SystemMonitorScreen, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
 
-<SystemMonitorScreen />
+const env = getCurrentEnvironment();
+
+<SystemMonitorScreen 
+  env={env}
+  blacklist={[]} // Optional: list of paths to exclude
+/>
 ```
 
 #### App Grid
 
 ```tsx
-import { AppGrid } from 'sevago-sso-fe';
-
-<AppGrid apps={apps} onAppClick={handleAppClick} loading={loading} />
+import { AppGrid, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
+
+// AppGrid automatically handles URL routing:
+// - If env is valid (develop/staging/production): uses configured URLs
+// - If env is not valid (e.g., localhost): uses localhost with path
+
+const env = getCurrentEnvironment(); // or Environment.DEVELOP, etc.
+
+<AppGrid 
+  apps={apps} 
+  env={env}
+  columns={5}
+  rows={3}
+  iconSize={80}
+  showPagination={true}
+/>
 ```
 
 #### Sidebar Components
 
 ```tsx
-import { AppsSidebar, SystemMonitorSidebarPart } from 'sevago-sso-fe';
+import { AppsSidebar, SystemMonitorSidebarPart, Environment, getCurrentEnvironment } from 'sevago-sso-fe';
 
-<AppsSidebar />
+const env = getCurrentEnvironment();
+
+<AppsSidebar 
+  isOpen={true}
+  onClose={() => {}}
+  env={env}
+  blacklist={[]} // Optional
+/>
 <SystemMonitorSidebarPart />
 ```
 
 #### UI Elements
 
+##### Avatar Elements
+```tsx
+import { 
+  AvatarElement,
+  AvatarOnlineStatusElement,
+  AvatarUserInfo
+} from 'sevago-sso-fe';
+
+<AvatarElement src="/avatar.jpg" alt="User" />
+<AvatarOnlineStatusElement src="/avatar.jpg" isOnline={true} />
+<AvatarUserInfo name="John Doe" avatar="/avatar.jpg" />
+```
+
+##### Button Elements
+```tsx
+import { 
+  ButtonElement,
+  ButtonIconElement,
+  ButtonIconCircleElement,
+  ButtonIconSquareElement,
+  ButtonIconContentOpacityElement,
+  ButtonImageElement,
+  ButtonUploadFileElement
+} from 'sevago-sso-fe';
+
+<ButtonElement onClick={handleClick}>Click me</ButtonElement>
+<ButtonIconElement icon="home" onClick={handleClick} />
+<ButtonIconCircleElement icon="user" onClick={handleClick} />
+<ButtonUploadFileElement onUpload={handleUpload} />
+```
+
+##### Icon Elements
+```tsx
+import { 
+  IconElement,
+  IconContentElement,
+  IconContentBadgeCountElement,
+  IconContentBadgeCountSubsElement,
+  IconButtonElement,
+  IconContentSubsElement,
+  IconContentOpacityElement
+} from 'sevago-sso-fe';
+
+<IconElement icon="home" />
+<IconContentElement icon="user" content="Profile" />
+<IconContentBadgeCountElement icon="notifications" count={5} />
+```
+
+##### Image Elements
 ```tsx
 import { 
   ImageElement,
+  ImageContentCaptionComponent,
+  ImageContentTimeComponent,
+  ImageSizeType
+} from 'sevago-sso-fe';
+
+<ImageElement url="/image.jpg" sizeType={ImageSizeType.SQUARE} />
+<ImageContentCaptionComponent image="/image.jpg" caption="Caption text" />
+<ImageContentTimeComponent image="/image.jpg" time={new Date()} />
+```
+
+##### Link Elements
+```tsx
+import { 
+  LinkElement,
+  LinkInternalElement
+} from 'sevago-sso-fe';
+
+<LinkElement href="/path" target="_blank">External Link</LinkElement>
+<LinkInternalElement to="/internal">Internal Link</LinkInternalElement>
+```
+
+##### Form Elements
+```tsx
+import { 
   RadioElement,
-  TypographyContentCaption,
-  MotionBox
+  CheckboxElement
 } from 'sevago-sso-fe';
 
-<ImageElement src="/path/to/image.jpg" alt="Image" />
 <RadioElement value="option1" checked={true} onChange={handleChange} />
+<CheckboxElement checked={false} onChange={handleChange} />
+```
+
+##### Typography Elements
+```tsx
+import { 
+  TypographyContentCaption,
+  TypographyOneLine
+} from 'sevago-sso-fe';
+
 <TypographyContentCaption>Caption text</TypographyContentCaption>
-<MotionBox animate={{ opacity: 1 }}>Animated content</MotionBox>
+<TypographyOneLine>Long text that will be truncated...</TypographyOneLine>
+```
+
+##### Tabs Elements
+```tsx
+import { 
+  TabsComponent,
+  TabsSubsComponent,
+  TabsBadgeCountComponent,
+  TabsBadgeCountSubsComponent,
+  TAB_STYLES,
+  TAB_BACKGROUND_STYLES
+} from 'sevago-sso-fe';
+
+<TabsComponent tabs={tabs} value={value} onChange={handleChange} />
+<TabsBadgeCountComponent tabs={tabs} badgeCounts={[5, 3, 2]} />
+```
+
+##### Time Ago Elements
+```tsx
+import { 
+  TimeAgoComponent,
+  TimeAgoContentComponent
+} from 'sevago-sso-fe';
+
+<TimeAgoComponent date={new Date()} />
+<TimeAgoContentComponent date={new Date()} content="Posted" />
+```
+
+##### Other Elements
+```tsx
+import { 
+  DialogElement,
+  DialogConfirmActionElement,
+  DashedDividerElement,
+  MotionBox
+} from 'sevago-sso-fe';
+
+<DialogElement open={open} onClose={handleClose}>Content</DialogElement>
+<DialogConfirmActionElement 
+  open={open} 
+  onConfirm={handleConfirm} 
+  onCancel={handleCancel}
+/>
+<DashedDividerElement />
+<MotionBox preset="fadeInUp" hover>Animated content</MotionBox>
 ```
 
 ### Constants
@@ -171,20 +322,28 @@ import { stringUtils } from 'sevago-sso-fe';
 #### App Utils
 
 ```tsx
-import { appUtils } from 'sevago-sso-fe';
+import { Environment, getCurrentEnvironment } from 'sevago-sso-fe';
+
+// Get current environment based on hostname
+const env = getCurrentEnvironment(); 
+// Returns: Environment.DEVELOP | Environment.STAGING | Environment.PRODUCTION
 
-// Use app utility functions
+// Environment enum values
+const develop = Environment.DEVELOP; // "develop"
+const staging = Environment.STAGING; // "staging"
+const production = Environment.PRODUCTION; // "production"
 ```
 
 ### Enums
 
 ```tsx
-import { AppCategory, Mode, OrderType } from 'sevago-sso-fe';
+import { AppCategory, Mode, OrderType, Environment } from 'sevago-sso-fe';
 
 // Use enums
 const category = AppCategory.ALL;
 const mode = Mode.LIGHT;
 const order = OrderType.ASC;
+const env = Environment.DEVELOP;
 ```
 
 ---
@@ -196,14 +355,60 @@ const order = OrderType.ASC;
 | 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 | - |
+| `SystemMonitorScreen` | System monitoring dashboard screen | `env: Environment`, `blacklist?: string[]` |
+| `AppGrid` | Application grid component with smart URL routing | `apps: AppInfo[]`, `env: Environment`, `columns?: number`, `rows?: number`, `iconSize?: number`, `iconRadius?: number`, `gap?: number \| string`, `showPagination?: boolean`, `titleVariant?`, `titleColor?`, `captionColor?` |
+| `AppsSidebar` | Applications sidebar component | `isOpen: boolean`, `onClose: () => void`, `env: Environment`, `position?: "left" \| "right"`, `blacklist?: string[]` |
 | `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` |
+| **Avatar Elements** | | |
+| `AvatarElement` | Basic avatar element | `src`, `alt`, `sx?` |
+| `AvatarOnlineStatusElement` | Avatar with online status indicator | `src`, `isOnline`, `sx?` |
+| `AvatarUserInfo` | Avatar with user information | `name`, `avatar`, `sx?` |
+| **Button Elements** | | |
+| `ButtonElement` | Standard button | `onClick`, `children`, `variant?`, `sx?` |
+| `ButtonIconElement` | Button with icon | `icon`, `onClick`, `sx?` |
+| `ButtonIconCircleElement` | Circular icon button | `icon`, `onClick`, `sx?` |
+| `ButtonIconSquareElement` | Square icon button | `icon`, `onClick`, `sx?` |
+| `ButtonIconContentOpacityElement` | Button with icon and opacity content | `icon`, `content`, `onClick`, `sx?` |
+| `ButtonImageElement` | Button with image | `image`, `onClick`, `sx?` |
+| `ButtonUploadFileElement` | File upload button | `onUpload`, `accept?`, `sx?` |
+| **Icon Elements** | | |
+| `IconElement` | Basic icon | `icon`, `sx?` |
+| `IconContentElement` | Icon with content | `icon`, `content`, `sx?` |
+| `IconContentBadgeCountElement` | Icon with badge count | `icon`, `count`, `sx?` |
+| `IconContentBadgeCountSubsElement` | Icon with badge count and subtitle | `icon`, `count`, `subtitle`, `sx?` |
+| `IconButtonElement` | Icon button | `icon`, `onClick`, `sx?` |
+| `IconContentSubsElement` | Icon with content and subtitle | `icon`, `content`, `subtitle`, `sx?` |
+| `IconContentOpacityElement` | Icon with opacity content | `icon`, `content`, `opacity?`, `sx?` |
+| **Image Elements** | | |
+| `ImageElement` | Image element | `url: string`, `sizeType?: ImageSizeType`, `sx?` |
+| `ImageContentCaptionComponent` | Image with caption | `image`, `caption`, `sx?` |
+| `ImageContentTimeComponent` | Image with time | `image`, `time`, `sx?` |
+| **Link Elements** | | |
+| `LinkElement` | External link | `href`, `target?`, `children`, `sx?` |
+| `LinkInternalElement` | Internal router link | `to`, `children`, `sx?` |
+| **Form Elements** | | |
+| `RadioElement` | Radio button | `value`, `checked`, `onChange`, `sx?` |
+| `CheckboxElement` | Checkbox | `checked`, `onChange`, `label?`, `sx?` |
+| **Typography Elements** | | |
+| `TypographyContentCaption` | Typography with caption | `children`, `variant?`, `color?`, `sx?` |
+| `TypographyOneLine` | Single line typography (truncated) | `children`, `variant?`, `sx?` |
+| **Tabs Elements** | | |
+| `TabsComponent` | Basic tabs | `tabs`, `value`, `onChange`, `sx?` |
+| `TabsSubsComponent` | Tabs with subtitles | `tabs`, `value`, `onChange`, `sx?` |
+| `TabsBadgeCountComponent` | Tabs with badge counts | `tabs`, `badgeCounts`, `value`, `onChange`, `sx?` |
+| `TabsBadgeCountSubsComponent` | Tabs with badge counts and subtitles | `tabs`, `badgeCounts`, `value`, `onChange`, `sx?` |
+| **Time Elements** | | |
+| `TimeAgoComponent` | Time ago display | `date`, `sx?` |
+| `TimeAgoContentComponent` | Time ago with content | `date`, `content?`, `sx?` |
+| **Other Elements** | | |
+| `DialogElement` | Dialog/modal | `open`, `onClose`, `children`, `sx?` |
+| `DialogConfirmActionElement` | Confirmation dialog | `open`, `onConfirm`, `onCancel`, `title?`, `content?`, `sx?` |
+| `DashedDividerElement` | Dashed divider line | `sx?` |
+| `MotionBox` | Framer Motion animated box | `preset?`, `animate?`, `transition?`, `children`, `hover?`, `index?`, `sx?` |
+
+**Note:** `AppGrid` automatically handles URL routing:
+- If `env` is a valid Environment enum value (develop/staging/production): uses configured URLs from `app.path[env]`
+- If `env` is not valid (e.g., localhost development): extracts path and uses `window.location.origin` with the path
 
 ### Constants
 
@@ -227,14 +432,21 @@ const order = OrderType.ASC;
   - `isDateString(str)`
 
 - **`stringUtils`** - String utility functions
-- **`appUtils`** - Application utility functions
 - **`getLimitLineCss`** - CSS utility for limiting lines
+- **`Environment`** - Environment enum (DEVELOP, STAGING, PRODUCTION)
+- **`getCurrentEnvironment()`** - Detects current environment based on hostname
+  - Returns `Environment.DEVELOP` if hostname includes "dev."
+  - Returns `Environment.STAGING` if hostname includes "sta."
+  - Returns `Environment.PRODUCTION` otherwise
 
 ### Enums
 
 - **`AppCategory`** - Application category enum
 - **`Mode`** - Theme mode enum
 - **`OrderType`** - Order type enum
+- **`Environment`** - Environment enum (DEVELOP, STAGING, PRODUCTION)
+- **`AppGroup`** - Application group enum (ALL, HRM, WORKFLOW_ENGINE, PLATFORM_AND_INFO, B2B, OTHER, CLIENT)
+- **`ImageSizeType`** - Image size type enum
 
 ---
 
@@ -244,8 +456,25 @@ Full TypeScript support with comprehensive type definitions:
 
 ```tsx
 import type { 
-  // Add your types here based on actual exports
+  AppInfo,
+  AppGridProps,
+  SystemMonitorScreenProps,
+  AppsSidebarProps,
+  Environment
 } from 'sevago-sso-fe';
+
+// AppInfo interface
+interface AppInfo {
+  path: {
+    develop: string;
+    staging: string;
+    production: string;
+  };
+  content: string;
+  color: string;
+  icon: string;
+  group: AppGroup;
+}
 ```
 
 ---

package/dist/common/constant/apps.data.d.ts

@@ -9,6 +9,7 @@ export declare enum AppGroup {
 }
 export interface AppInfo {
     path: {
+        local: string;
         develop: string;
         staging: string;
         production: string;
@@ -27,6 +28,7 @@ export declare const APP_GROUP_COLOR: {
     Khác: string;
 };
 export declare const SSO: {
+    local: string;
     develop: string;
     staging: string;
     production: string;
@@ -34,6 +36,7 @@ export declare const SSO: {
 export declare const APP_OBJ: {
     E_HIRING: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -45,6 +48,7 @@ export declare const APP_OBJ: {
     };
     HR: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -56,6 +60,7 @@ export declare const APP_OBJ: {
     };
     PAYROLL: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -67,6 +72,7 @@ export declare const APP_OBJ: {
     };
     ORG: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -78,6 +84,7 @@ export declare const APP_OBJ: {
     };
     CHECKIN: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -89,6 +96,7 @@ export declare const APP_OBJ: {
     };
     CHAT: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -100,6 +108,7 @@ export declare const APP_OBJ: {
     };
     TRAINING: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -111,6 +120,7 @@ export declare const APP_OBJ: {
     };
     FORM: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -122,6 +132,7 @@ export declare const APP_OBJ: {
     };
     INSIDE: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -133,6 +144,7 @@ export declare const APP_OBJ: {
     };
     BOOKING: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -144,6 +156,7 @@ export declare const APP_OBJ: {
     };
     PROJECT: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -155,6 +168,7 @@ export declare const APP_OBJ: {
     };
     REQUEST: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -166,6 +180,7 @@ export declare const APP_OBJ: {
     };
     TRACKING: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -177,6 +192,7 @@ export declare const APP_OBJ: {
     };
     PROCESS: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -188,6 +204,7 @@ export declare const APP_OBJ: {
     };
     FORMULA_PRICE: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -199,6 +216,7 @@ export declare const APP_OBJ: {
     };
     E_CATALOGUE: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;
@@ -210,6 +228,7 @@ export declare const APP_OBJ: {
     };
     LANDING_PAGE: {
         path: {
+            local: string;
             develop: string;
             staging: string;
             production: string;

package/dist/common/constant/color.constant.d.ts

@@ -0,0 +1,40 @@
+export declare const COLOR_CONSTANT: {
+    error: string;
+    successLight: string;
+    success: string;
+    main: string;
+    mainLight: string;
+    info: string;
+    warning: string;
+    secondary: string;
+    white: string;
+    gray: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+    gray10: string;
+    green: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    blue: string;
+    blue2: string;
+    red: string;
+    red2: string;
+    black: string;
+    yellow: string;
+    new: string;
+    pending: string;
+    overDue: string;
+    primary: string;
+};
+export declare const colorMap: Record<string, {
+    backgroundColor: string;
+    color: string;
+}>;

package/dist/common/constant/hierarchical.constant.d.ts

@@ -0,0 +1,8 @@
+export declare const columnWidth = 250;
+export declare const columnHeight = 400;
+export declare const visibleCount = 3;
+export declare const rowHeight = 40;
+export declare const COLOR_HIERARCHIAL: {
+    COLOR_HIGHLIGHT_ROW: string;
+    COLOR_HIGHLIGHT_TEXT: string;
+};

package/dist/common/constant/index.d.ts

@@ -1,6 +1,8 @@
+export * from './apps.data';
+export * from './color.constant';
+export * from './icons.constant';
 export * from './mode.constant';
 export * from './opacity.constant';
 export * from './reg-exp.constant';
-export * from './typography.constant';
 export * as STYLE from './style.constant';
-export * from './icons.constant';
+export * from './typography.constant';

package/dist/common/enums/app-category.enum.d.ts

@@ -2,3 +2,9 @@ export declare enum AppType {
     SUBMENU = "submenu",
     EXPAND_MENU = "expand-menu"
 }
+export declare enum SnackbarType {
+    INFO = "info",
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning"
+}

package/dist/common/index.d.ts

@@ -1,3 +1,4 @@
 export * from './constant';
 export * from './enums';
+export * from './interfaces';
 export * from './utils';

package/dist/common/interfaces/image-with-preview.interface.d.ts

@@ -0,0 +1,3 @@
+export interface FileWithPreview extends File {
+    preview: string;
+}

package/dist/common/interfaces/index.d.ts

@@ -0,0 +1 @@
+export * from './image-with-preview.interface';

package/dist/common/utils/index.d.ts

@@ -1,5 +1,3 @@
 export * from './other';
-export * from './string.utils';
 export * from './time.utils';
-import * as timeUtilsMethods from "./time.utils";
-export declare const timeUtils: typeof timeUtilsMethods;
+export * from './validator.utils';

package/dist/common/utils/other/hierarchical.utils.d.ts

@@ -0,0 +1 @@
+export declare const normalizeText: (text: string) => string;

package/dist/common/utils/validator.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isEmpty: (value: any) => boolean;
+export declare const checkEmptyText: (value: any) => string;

package/dist/components/app-grid/app-grid.component.d.ts

@@ -1,19 +1,17 @@
 import { default as React } from 'react';
 import { AppInfo } from '../../common/constant/apps.data';
-import { Environment } from '../../common';
 export interface AppGridProps {
     apps: AppInfo[];
     columns?: number;
     rows?: number;
     iconSize?: number;
     iconRadius?: number;
-    iconShadow?: string;
     gap?: number | string;
     titleVariant?: "subtitle1" | "body1" | "caption";
     captionVariant?: "caption" | "body2";
     titleColor?: string;
     captionColor?: string;
     showPagination?: boolean;
-    env: Environment;
+    onClickApp: (appInfo: AppInfo) => void;
 }
 export declare const AppGrid: React.FC<AppGridProps>;

package/dist/components/banner/banner.component.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface BannerComponentProps {
+    url: string;
+}
+export declare const BannerComponent: React.FC<BannerComponentProps>;

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

@@ -0,0 +1 @@
+export { BannerComponent } from './banner.component';

package/dist/components/bread-cumbs/bread-cumbs.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface BreadcrumbsProps {
+    content: string;
+    showBackButton?: boolean;
+    onBack?: () => void;
+    sxLabel?: React.CSSProperties;
+}
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export {};

package/dist/components/bread-cumbs/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumbs } from './bread-cumbs';

package/dist/components/elements/avatar/avatar-online-status.element.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface AvatarOnlineStatusElementProps {
+    url?: string | null;
+    size?: "small" | "medium" | "large" | "extra_large";
+    online?: boolean;
+    children?: React.ReactNode;
+}
+export declare const OnlineBadge: import('@emotion/styled').StyledComponent<import('@mui/material').BadgeOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "components" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "slots" | "slotProps" | "componentsProps" | "max" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    component?: React.ElementType;
+}, {}, {}>;
+export declare const AvatarOnlineStatusElement: React.FC<AvatarOnlineStatusElementProps>;
+export default AvatarOnlineStatusElement;

package/dist/components/elements/avatar/avatar-user-info.element.d.ts

@@ -0,0 +1,14 @@
+import { SxProps } from '@mui/material';
+import { default as React } from 'react';
+import { SizeProps } from '../../../common';
+export interface AvatarUserInfoProps {
+    name: string;
+    url?: string;
+    positions?: string[];
+    maxWidth?: string | number;
+    isTag?: boolean;
+    sxName?: SxProps;
+    sxPosition?: SxProps;
+    sizeAvatar?: SizeProps;
+}
+export declare const AvatarUserInfo: React.FC<AvatarUserInfoProps>;