@pagamio/frontend-commons-lib 0.8.191 → 0.8.193

package/lib/auth/types/auth.types.d.ts

@@ -254,6 +254,8 @@ export interface CommerceAppAuthConfig extends CustomAuthConfig {
         id: string;
         /** Username used for authentication */
         userName: string;
+        /** Array of role identifiers assigned to the user */
+        roles: string[];
         /** Current onboarding step */
         onboardingStep?: string | null;
         /** Secondary user identifier */
@@ -273,8 +275,7 @@ export interface CommerceAppAuthConfig extends CustomAuthConfig {
     /** Login credentials structure */
     Credentials: {
         /** Username or email for authentication */
-        username?: string;
-        email?: string;
+        username: string;
         /** User's password */
         password: string;
     };

package/lib/auth/utils/Transformers.js

@@ -291,6 +291,7 @@ export class CommerceAppResponseTransformer {
             user: {
                 id: data.user.id,
                 userName: data.user.userName,
+                roles: data.user.roles || [],
                 onboardingStep: data.user.onboardingStep,
                 userId: data.user.id,
                 userType: data.user.userType || 'customer',

package/lib/components/layout/AppLayout.d.ts

@@ -28,7 +28,13 @@ interface AppLayoutProps {
      * Translation provider configuration
      */
     translationConfig?: Omit<TranslationProviderProps, 'children'>;
+    /**
+     * Optional custom header component to render at the top of the sidebar
+     * Useful for module switchers, additional navigation, or branding
+     * @default undefined
+     */
+    sidebarHeader?: React.ReactNode;
 }
-declare const AppLayout: ({ children, appNavbar, hideSidebar, hideNavbar, hideBreadcrumbNav, enableTranslations, translationConfig, }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppLayout: ({ children, appNavbar, hideSidebar, hideNavbar, hideBreadcrumbNav, enableTranslations, translationConfig, sidebarHeader, }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export default AppLayout;
 export type { AppLayoutProps };

package/lib/components/layout/AppLayout.js

@@ -4,7 +4,7 @@ import { useAnyDrawerOpen } from '../../shared/hooks/useAnyDrawerOpen';
 import { TranslationProvider } from '../../translations';
 import { AppBreadcrumbNav, AppDashboardNavbar, AppDashboardSidebar, AppLayoutContent, SessionExpiryModal, } from '../layout';
 import LoaderComponent from '../ui/Loader';
-const AppLayout = ({ children, appNavbar, hideSidebar = false, hideNavbar = false, hideBreadcrumbNav = false, enableTranslations = false, translationConfig, }) => {
+const AppLayout = ({ children, appNavbar, hideSidebar = false, hideNavbar = false, hideBreadcrumbNav = false, enableTranslations = false, translationConfig, sidebarHeader, }) => {
     const isDrawerOpen = useAnyDrawerOpen();
     const { showModal, countdown, loading, modalDismissed, handleCloseModal, handleRefreshToken } = useSessionTimer();
     if (loading) {

package/lib/components/layout/Sidebar.js

@@ -50,15 +50,15 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
             'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
 };
 const AppMobileSidebar = () => {
-    const { mobile: { isOpen, close }, } = useAppSidebarContext();
+    const { mobile: { isOpen, close }, sidebarHeader, } = useAppSidebarContext();
     const { t } = useTranslation();
     const { tLib } = useLibTranslations();
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [_jsx("form", { className: "pb-3", children: _jsx(TextInput, { icon: HiSearch, type: "search", placeholder: tLib('sidebar.searchPlaceholder', 'Search'), required: true, size: 32 }) }), _jsx(AppSidebarMenu, {})] }) }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("form", { className: "pb-3", children: _jsx(TextInput, { icon: HiSearch, type: "search", placeholder: tLib('sidebar.searchPlaceholder', 'Search'), required: true, size: 32 }) }), _jsx(AppSidebarMenu, {})] }) }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
 };
 const AppDesktopSidebar = () => {
-    const { desktop: { isCollapsed, setCollapsed }, } = useAppSidebarContext();
+    const { desktop: { isCollapsed, setCollapsed }, sidebarHeader, } = useAppSidebarContext();
     const [isPreview, setIsPreview] = useState(isCollapsed);
     const { tLib } = useLibTranslations();
     useEffect(() => {
@@ -78,7 +78,7 @@ const AppDesktopSidebar = () => {
             setCollapsed(true);
         },
     };
-    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "py-2", children: _jsx(AppSidebarMenu, {}) }) }) }));
+    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx(AppSidebarMenu, {})] }) }) }));
 };
 const AppDashboardSidebar = () => {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "md:hidden", children: _jsx(AppMobileSidebar, {}) }), _jsx("div", { className: "hidden md:block", children: _jsx(AppDesktopSidebar, {}) })] }));

package/lib/context/SidebarContext.d.ts

@@ -18,6 +18,7 @@ interface AppSidebarPageItem {
  * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
+ * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  */
 interface AppSidebarContextProps {
     desktop: {
@@ -33,6 +34,7 @@ interface AppSidebarContextProps {
     pages: AppSidebarPageItem[];
     pathname: string;
     linkComponent: React.ElementType;
+    sidebarHeader?: React.ReactNode;
 }
 /**
  * Props for the AppSidebarProvider component
@@ -42,18 +44,20 @@ interface AppSidebarContextProps {
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {ReactNode} children - Child components
+ * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  */
 interface AppSidebarProviderProps extends PropsWithChildren {
     initialCollapsed: boolean;
     pages: AppSidebarPageItem[];
     pathname: string;
     linkComponent: React.ElementType;
+    sidebarHeader?: React.ReactNode;
 }
 /**
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Hook for accessing sidebar context
  * @throws {Error} When used outside AppSidebarProvider

package/lib/context/SidebarContext.js

@@ -8,7 +8,7 @@ const AppSidebarContext = createContext(null);
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, }) => {
+const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }) => {
     const [isOpenMobile, setIsOpenMobile] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
     function handleSetCollapsed(value) {
@@ -28,7 +28,8 @@ const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkC
         pages,
         pathname,
         linkComponent,
-    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent]);
+        sidebarHeader,
+    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader]);
     return _jsx(AppSidebarContext.Provider, { value: value, children: children });
 };
 /**

package/lib/pagamio-table/data-table/TableToolbar.js

@@ -8,9 +8,16 @@ const TableToolbar = ({ searchable, searchQuery, onSearch, filters = [], applied
     };
     return (_jsx(FilterComponent, { filters: filters.map((filterObj) => ({
             name: filterObj.columnKey,
-            type: 'select',
+            type: filterObj.type || 'select',
             options: filterObj.options,
             placeholder: filterObj.placeholder,
-        })), searctInputPlaceHolder: searctInputPlaceHolder, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, selectedFilters: appliedFilters, handleFilterChange: (name, value) => handleFilter(name, value), handleApplyFilters: handleApplyFilters ?? handleSearchTable, resetFilters: onClearFilters, showSearch: searchable, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: isNarrow ? 'flex flex-col items-stretch space-y-2 pt-5' : 'flex items-center flex-wrap gap-2', children: [exportable && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: _jsx(ExportDropdown, { containerClassName: "w-full", columns: columns, data: data, buttonClassName: "h-10", extraOptions: extraExportOptions, pdfOptions: pdfExportOptions, xlsxOptions: xlsxExportOptions, csvOptions: csvExportOptions, exportAll: exportAll, fetchData: fetchData }) })), addButton && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd, icon: HiPlusSm, label: "add-new-entry", className: "items-center w-full text-nowrap", children: addText ?? 'Add New Entry' })) : (addButton) }))] }) }));
+        })), searctInputPlaceHolder: searctInputPlaceHolder, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, selectedFilters: appliedFilters, handleFilterChange: (name, value) => {
+            if (value instanceof Date) {
+                handleFilter(name, value.toISOString());
+            }
+            else {
+                handleFilter(name, value);
+            }
+        }, handleApplyFilters: handleApplyFilters ?? handleSearchTable, resetFilters: onClearFilters, showSearch: searchable, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: isNarrow ? 'flex flex-col items-stretch space-y-2 pt-5' : 'flex items-center flex-wrap gap-2', children: [exportable && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: _jsx(ExportDropdown, { containerClassName: "w-full", columns: columns, data: data, buttonClassName: "h-10", extraOptions: extraExportOptions, pdfOptions: pdfExportOptions, xlsxOptions: xlsxExportOptions, csvOptions: csvExportOptions, exportAll: exportAll, fetchData: fetchData }) })), addButton && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd, icon: HiPlusSm, label: "add-new-entry", className: "items-center w-full text-nowrap", children: addText ?? 'Add New Entry' })) : (addButton) }))] }) }));
 };
 export default TableToolbar;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.191",
+  "version": "0.8.193",
   "publishConfig": {
     "access": "public",
     "provenance": false