@syuttechnologies/layout 1.0.1 → 1.0.21

package/dist/components/EnterpriseLayout.js

@@ -110,7 +110,6 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
                     setDynamicNavigation(parsedNavigation);
                     // Update expanded sections for the new navigation
                     setExpandedSections(new Set(parsedNavigation.map((n) => n.section)));
-                    setExpandedOverviewSections(new Set(parsedNavigation.filter((sec) => sec.section !== "Dashboard").map((sec) => sec.section)));
                 }
             }
             catch (error) {
@@ -142,10 +141,25 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
             }
         }
     }, []);
+    // Sync dynamicModules when config.modules prop changes (if no localStorage override)
+    useEffect(() => {
+        const storedModules = localStorage.getItem('MODULES_CONFIG');
+        if (!storedModules && config.modules) {
+            setDynamicModules(config.modules);
+        }
+    }, [config.modules]);
+    // Sync dynamicNavigation when config.navigation prop changes (if no localStorage override)
+    useEffect(() => {
+        const storedNavigation = localStorage.getItem('NAVIGATION_MENU');
+        if (!storedNavigation && config.navigation) {
+            setDynamicNavigation(config.navigation);
+            setExpandedSections(new Set(config.navigation.map((n) => n.section)));
+        }
+    }, [config.navigation]);
     // User preference for auto-collapse (configurable)
     const [autoCollapseEnabled, setAutoCollapseEnabled] = useState(config.layout.autoCollapseSidebar);
     // Overview tab section management
-    const [expandedOverviewSections, setExpandedOverviewSections] = useState(new Set(config.navigation.filter(sec => sec.section !== "Dashboard").map(sec => sec.section)));
+    const [expandedOverviewSections, setExpandedOverviewSections] = useState(new Set());
     // React 18 Concurrent Features
     const [isPending, startTransition] = useTransition();
     const deferredActiveTab = useDeferredValue(activeTab);
@@ -994,7 +1008,7 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
 
       .tab-content-area {
         flex: 1;
-        overflow: hidden;
+        overflow: auto;
         width: 100%;
         height: 100%;
         min-height: 0;
@@ -1006,7 +1020,7 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
         display: none;
         width: 100%;
         height: 100%;
-        overflow: hidden;
+        overflow: auto;
         box-sizing: border-box;
       }
 
@@ -1292,6 +1306,7 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
         cursor: pointer;
         transition: all 0.3s ease;
         flex-shrink: 0;
+        z-index: 10002;
       }
 
       .persona-control:hover {
@@ -1332,7 +1347,7 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
         border-radius: 1rem;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
         padding: 1rem;
-        z-index: 1001;
+        z-index: 10001;
         margin-top: 0.5rem;
         opacity: 0;
         visibility: hidden;
@@ -2616,7 +2631,7 @@ export const EnterpriseLayout = ({ config, componentRegistry, children, router =
                                                             }, children: "Tabs" }), _jsx("button", { className: `view-mode-btn ${!tabModeEnabled ? "active" : ""}`, onClick: (e) => {
                                                                 e.stopPropagation();
                                                                 startTransition(() => setTabModeEnabled(false));
-                                                            }, children: "Single" })] })] }), _jsxs("div", { className: "persona-control-item", children: [_jsxs("div", { className: "persona-control-label", children: [_jsx(IconSystem.settings, {}), "Dark Mode--3"] }), _jsx("div", { className: `theme-switch ${darkMode ? "active" : ""}`, onClick: (e) => {
+                                                            }, children: "Single" })] })] }), _jsxs("div", { className: "persona-control-item", children: [_jsxs("div", { className: "persona-control-label", children: [_jsx(IconSystem.settings, {}), "Dark Mode-7"] }), _jsx("div", { className: `theme-switch ${darkMode ? "active" : ""}`, onClick: (e) => {
                                                         e.stopPropagation();
                                                         toggleTheme();
                                                     }, children: _jsx("div", { className: "theme-switch-handle" }) })] }), _jsxs("div", { className: "persona-control-item", children: [_jsxs("div", { className: "persona-control-label", children: [_jsx(IconSystem.footer, {}), "Show Footer"] }), _jsx("div", { className: `theme-switch ${footerVisible ? "active" : ""}`, onClick: (e) => {

package/dist/components/ui/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+export interface ActionMenuItem<T = any> {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onClick: (() => void) | ((row: T) => void);
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+    isVisible?: (row: T) => boolean;
+}
+export interface ProcessedActionMenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onClick: () => void;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+}
+export interface ActionMenuProps {
+    /** Unique identifier for the menu */
+    id?: string;
+    /** Array of menu items to display - accepts both processed and raw items */
+    items: ProcessedActionMenuItem[] | ActionMenuItem[];
+    /** Custom trigger button content */
+    triggerContent?: ReactNode;
+    /** Additional class name for the trigger button */
+    triggerClassName?: string;
+    /** Menu position preference */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Callback when menu opens/closes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * ActionMenu - A reusable dropdown menu component that uses React Portal
+ * to render outside of parent containers, avoiding overflow clipping issues.
+ *
+ * @example
+ * ```tsx
+ * <ActionMenu
+ *   items={[
+ *     { id: 'view', label: 'View', icon: <EyeIcon />, onClick: () => handleView() },
+ *     { id: 'edit', label: 'Edit', icon: <EditIcon />, onClick: () => handleEdit() },
+ *     { id: 'delete', label: 'Delete', icon: <TrashIcon />, onClick: () => handleDelete(), variant: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ActionMenu: React.FC<ActionMenuProps>;
+export default ActionMenu;
+//# sourceMappingURL=ActionMenu.d.ts.map

package/dist/components/ui/ActionMenu/ActionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ3D,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;CACjC;AAGD,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,KAAK,EAAE,uBAAuB,EAAE,GAAG,cAAc,EAAE,CAAC;IACpD,oCAAoC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0JhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ui/ActionMenu/ActionMenu.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import IconSystem from '../../../icon-collection/icon-systems';
+// ============================================================================
+// COMPONENT
+// ============================================================================
+/**
+ * ActionMenu - A reusable dropdown menu component that uses React Portal
+ * to render outside of parent containers, avoiding overflow clipping issues.
+ *
+ * @example
+ * ```tsx
+ * <ActionMenu
+ *   items={[
+ *     { id: 'view', label: 'View', icon: <EyeIcon />, onClick: () => handleView() },
+ *     { id: 'edit', label: 'Edit', icon: <EditIcon />, onClick: () => handleEdit() },
+ *     { id: 'delete', label: 'Delete', icon: <TrashIcon />, onClick: () => handleDelete(), variant: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export const ActionMenu = ({ id, items, triggerContent, triggerClassName = '', position = 'bottom-right', onOpenChange, disabled = false, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef(null);
+    const calculatePosition = () => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const menuHeight = 200; // Approximate menu height
+        const menuWidth = 180; // Approximate menu width
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceRight = viewportWidth - rect.right;
+        let top;
+        let left;
+        // Determine vertical position
+        const shouldOpenUpward = position.startsWith('top') || spaceBelow < menuHeight;
+        if (shouldOpenUpward) {
+            top = rect.top - menuHeight - 4;
+        }
+        else {
+            top = rect.bottom + 4;
+        }
+        // Determine horizontal position
+        const shouldOpenLeft = position.endsWith('left') || spaceRight < menuWidth;
+        if (shouldOpenLeft) {
+            left = Math.max(8, rect.left);
+        }
+        else {
+            left = Math.max(8, rect.right - menuWidth);
+        }
+        // Ensure menu stays within viewport
+        top = Math.max(8, Math.min(top, viewportHeight - menuHeight - 8));
+        left = Math.max(8, Math.min(left, viewportWidth - menuWidth - 8));
+        setMenuPosition({ top, left });
+    };
+    const openMenu = () => {
+        if (disabled)
+            return;
+        calculatePosition();
+        setIsOpen(true);
+        onOpenChange?.(true);
+    };
+    const closeMenu = () => {
+        setIsOpen(false);
+        onOpenChange?.(false);
+    };
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        // Both processed and raw items should have onClick as () => void when used directly
+        item.onClick();
+        closeMenu();
+    };
+    const handleTriggerClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isOpen) {
+            closeMenu();
+        }
+        else {
+            openMenu();
+        }
+    };
+    return (_jsxs("div", { className: "action-menu-container", id: id, children: [_jsx("button", { ref: triggerRef, className: `action-menu-trigger ${isOpen ? 'active' : ''} ${triggerClassName}`, onClick: handleTriggerClick, type: "button", disabled: disabled, "aria-haspopup": "menu", "aria-expanded": isOpen, children: triggerContent || _jsx(IconSystem.moreVertical, { size: 16 }) }), isOpen && createPortal(_jsxs(_Fragment, { children: [_jsx("div", { onClick: closeMenu, style: {
+                            position: 'fixed',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            zIndex: 9998,
+                            background: 'transparent',
+                        }, "aria-hidden": "true" }), _jsx("div", { role: "menu", onClick: (e) => e.stopPropagation(), style: {
+                            position: 'fixed',
+                            top: menuPosition.top,
+                            left: menuPosition.left,
+                            zIndex: 9999,
+                            minWidth: '180px',
+                            maxHeight: '280px',
+                            overflowY: 'auto',
+                            background: 'white',
+                            border: '2px solid var(--primary)',
+                            borderRadius: '8px',
+                            boxShadow: '0 12px 32px rgba(37, 99, 235, 0.2)',
+                            padding: '0.5rem',
+                        }, children: items.map((item, index) => {
+                            // Check if we should add a divider before this item
+                            const prevItem = items[index - 1];
+                            const showDivider = prevItem && prevItem.variant !== 'danger' && item.variant === 'danger';
+                            return (_jsxs(React.Fragment, { children: [showDivider && _jsx("div", { className: "action-menu-divider" }), _jsxs("button", { role: "menuitem", className: `action-menu-item ${item.variant === 'danger' ? 'action-menu-item-danger' : ''}`, onClick: () => handleItemClick(item), disabled: item.disabled, children: [item.icon, _jsx("span", { children: item.label })] })] }, item.id));
+                        }) })] }), document.body)] }));
+};
+export default ActionMenu;

package/dist/components/ui/ActionMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { ActionMenu, type ActionMenuProps, type ActionMenuItem, type ProcessedActionMenuItem } from './ActionMenu';
+export { default } from './ActionMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/ActionMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/ActionMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACnH,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/ui/ActionMenu/index.js

@@ -0,0 +1,2 @@
+export { ActionMenu } from './ActionMenu';
+export { default } from './ActionMenu';

package/dist/components/ui/ModuleHeader/ModuleHeader.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+/**
+ * ============================================================================
+ * MODULE HEADER COMPONENT - REUSABLE HEADER FOR ALL MASTER SCREENS
+ * ============================================================================
+ *
+ * A flexible, configurable header component that can be used across all
+ * master screens (Service Master, GL Master, Customer Master, etc.)
+ *
+ * FEATURES:
+ * - Configurable title and description
+ * - Optional search functionality
+ * - Flexible view mode toggles (list, grid, calendar, etc.)
+ * - Optional filter button with active count badge
+ * - Custom toolbar items slot (for Column Selector, etc.)
+ * - Configurable action buttons (Add, Refresh, Export, Delete, etc.)
+ * - Responsive design with mobile overflow menu
+ * - Type-safe with TypeScript
+ * - Easy to extend without modifying base component
+ * ============================================================================
+ */
+/**
+ * Configuration for an individual action button
+ */
+export interface ActionButton {
+    id: string;
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+    tooltip?: string;
+    disabled?: boolean;
+    variant?: 'primary' | 'secondary' | 'icon' | 'danger';
+    visible?: boolean;
+}
+/**
+ * Configuration for view mode options (list, grid, calendar, etc.)
+ */
+export interface ViewModeOption {
+    id: string;
+    icon: React.ReactNode;
+    label: string;
+    tooltip?: string;
+    disabled?: boolean;
+}
+/**
+ * Configuration for the search bar
+ */
+export interface SearchConfig {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}
+/**
+ * Configuration for view mode toggle
+ */
+export interface ViewModeConfig {
+    currentMode: string;
+    modes: ViewModeOption[];
+    onChange: (mode: string) => void;
+}
+/**
+ * Configuration for the filter button
+ */
+export interface FilterConfig {
+    onClick: () => void;
+    isActive?: boolean;
+    activeCount?: number;
+    badgeCount?: number;
+    disabled?: boolean;
+    tooltip?: string;
+}
+/**
+ * Main props for the ModuleHeader component
+ */
+export interface ModuleHeaderProps {
+    title: string;
+    description?: string;
+    searchConfig?: SearchConfig;
+    viewModeConfig?: ViewModeConfig;
+    filterConfig?: FilterConfig;
+    customToolbarItems?: React.ReactNode;
+    actions?: ActionButton[];
+    showActionSeparator?: boolean;
+    visible?: boolean;
+    className?: string;
+}
+declare const ModuleHeader: React.FC<ModuleHeaderProps>;
+export default ModuleHeader;
+//# sourceMappingURL=ModuleHeader.d.ts.map

package/dist/components/ui/ModuleHeader/ModuleHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/ModuleHeader/ModuleHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;GAmBG;AAMH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuWD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqQ7C,CAAC;AAEF,eAAe,YAAY,CAAC"}