@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/components/charts/LineGraph.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useMemo } from 'react';
+const LineGraph = ({ data, title, yAxisLabel, color = '#60A5FA', // Default blue color
+className = '', loading = false, }) => {
+    const chartOptions = useMemo(() => {
+        if (!data?.length)
+            return {};
+        // Process dates to ensure consistent format
+        const processedData = data.map((point) => ({
+            value: [point.date instanceof Date ? point.date : new Date(point.date), point.value],
+        }));
+        return {
+            title: title
+                ? {
+                    text: title,
+                    left: 'center',
+                    top: 0,
+                    textStyle: {
+                        color: '#1F2937', // gray-800
+                        fontWeight: 'normal',
+                    },
+                }
+                : undefined,
+            tooltip: {
+                trigger: 'axis',
+                formatter: (params) => {
+                    const dataPoint = params[0];
+                    const date = new Date(dataPoint.value[0]);
+                    return `
+            ${date.toLocaleDateString('en-US', {
+                        month: '2-digit',
+                        day: '2-digit',
+                        year: 'numeric',
+                    })}<br/>
+            Value: ${dataPoint.value[1].toLocaleString()}
+          `;
+                },
+            },
+            grid: {
+                left: '5%',
+                right: '5%',
+                bottom: '5%',
+                top: title ? '60' : '30',
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'time',
+                axisLabel: {
+                    formatter: (value) => {
+                        const date = new Date(value);
+                        return date.toLocaleDateString('en-US', {
+                            month: '2-digit',
+                            day: '2-digit',
+                            year: 'numeric',
+                        });
+                    },
+                    hideOverlap: true,
+                },
+                splitLine: {
+                    show: false,
+                },
+            },
+            yAxis: {
+                type: 'value',
+                name: yAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 50,
+                axisLabel: {
+                    formatter: (value) => value.toLocaleString(),
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: 'dashed',
+                    },
+                },
+            },
+            legend: {
+                show: true,
+                top: title ? '30' : '0',
+                left: 'center',
+                data: [yAxisLabel || 'Value'],
+            },
+            series: [
+                {
+                    name: yAxisLabel || 'Value',
+                    type: 'line',
+                    data: processedData,
+                    showSymbol: false,
+                    smooth: true,
+                    lineStyle: {
+                        color: color,
+                        width: 2,
+                    },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: color,
+                                    opacity: 0.2,
+                                },
+                                {
+                                    offset: 1,
+                                    color: color,
+                                    opacity: 0,
+                                },
+                            ],
+                        },
+                    },
+                },
+            ],
+            animation: true,
+            animationDuration: 1000,
+            animationEasing: 'cubicInOut',
+        };
+    }, [data, title, yAxisLabel, color]);
+    if (loading) {
+        return (_jsx("div", { className: `animate-pulse ${className}`, children: _jsx("div", { className: "w-full aspect-[16/9] bg-gray-200 rounded-lg" }) }));
+    }
+    if (!data?.length) {
+        return (_jsx("div", { className: `flex items-center justify-center w-full aspect-[16/9] bg-gray-50 rounded-lg ${className}`, children: _jsx("p", { className: "text-gray-500", children: "No data available" }) }));
+    }
+    return (_jsx("div", { className: `relative ${className}`, children: _jsx(ReactECharts, { option: chartOptions, style: { height: '100%' }, className: "w-full aspect-[16/9] sm:aspect-[16/9]", opts: { renderer: 'canvas' }, notMerge: true }) }));
+};
+export default LineGraph;

package/lib/components/icons/Icon.d.ts

@@ -0,0 +1,8 @@
+import { type IconBaseProps } from 'react-icons';
+import { type IconName } from './types';
+type IconProps = {
+    name: IconName;
+} & IconBaseProps;
+declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Icon;
+export type { IconProps };

package/lib/components/icons/Icon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Icons } from './types';
+const Icon = (props) => {
+    const { name, ...rest } = props;
+    const Icon = useMemo(() => {
+        return Icons[name];
+    }, [name]);
+    if (Icon === null)
+        return null;
+    return _jsx(Icon, { ...rest });
+};
+export default Icon;

package/lib/components/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon, type IconProps } from './Icon';
+export * from './types';

package/lib/components/icons/index.js

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon';
+export * from './types';

package/lib/components/icons/types.d.ts

@@ -0,0 +1,26 @@
+export declare const Icons: {
+    MdOutlineWatchLater: import("react-icons").IconType;
+    IoCalendarOutline: import("react-icons").IconType;
+    MdOutlineRemoveRedEye: import("react-icons").IconType;
+    IoOptionsOutline: import("react-icons").IconType;
+    MdProductLimits: import("react-icons").IconType;
+    TbSpeakerphone: import("react-icons").IconType;
+    LuCalendarDays: import("react-icons").IconType;
+    MdOutlineStorefront: import("react-icons").IconType;
+    MdAccountBalance: import("react-icons").IconType;
+    FaCirclePlus: import("react-icons").IconType;
+    FaUserPlus: import("react-icons").IconType;
+    ImPriceTags: import("react-icons").IconType;
+    FiSettings: import("react-icons").IconType;
+    FiCalendar: import("react-icons").IconType;
+    FiPieChart: import("react-icons").IconType;
+    FiUpload: import("react-icons").IconType;
+    FiLogOut: import("react-icons").IconType;
+    FiUsers: import("react-icons").IconType;
+    IoClose: import("react-icons").IconType;
+    FaPlus: import("react-icons").IconType;
+    FiGift: import("react-icons").IconType;
+    FaEye: import("react-icons").IconType;
+    FaEyeSlash: import("react-icons").IconType;
+};
+export type IconName = keyof typeof Icons;

package/lib/components/icons/types.js

@@ -0,0 +1,33 @@
+import { FaEye, FaEyeSlash } from 'react-icons/fa';
+import { FaCirclePlus, FaPlus, FaUserPlus } from 'react-icons/fa6';
+import { FiCalendar, FiGift, FiLogOut, FiPieChart, FiSettings, FiUpload, FiUsers } from 'react-icons/fi';
+import { ImPriceTags } from 'react-icons/im';
+import { IoCalendarOutline, IoClose, IoOptionsOutline } from 'react-icons/io5';
+import { LuCalendarDays } from 'react-icons/lu';
+import { MdAccountBalance, MdOutlineRemoveRedEye, MdOutlineStorefront, MdOutlineWatchLater, MdOutlineProductionQuantityLimits as MdProductLimits, } from 'react-icons/md';
+import { TbSpeakerphone } from 'react-icons/tb';
+export const Icons = {
+    MdOutlineWatchLater,
+    IoCalendarOutline,
+    MdOutlineRemoveRedEye,
+    IoOptionsOutline,
+    MdProductLimits,
+    TbSpeakerphone,
+    LuCalendarDays,
+    MdOutlineStorefront,
+    MdAccountBalance,
+    FaCirclePlus,
+    FaUserPlus,
+    ImPriceTags,
+    FiSettings,
+    FiCalendar,
+    FiPieChart,
+    FiUpload,
+    FiLogOut,
+    FiUsers,
+    IoClose,
+    FaPlus,
+    FiGift,
+    FaEye,
+    FaEyeSlash,
+};

package/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './icons';
+export * from './layout';
+export * from './ui';

package/lib/components/index.js

@@ -0,0 +1,3 @@
+export * from './icons';
+export * from './layout';
+export * from './ui';

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { TranslationProviderProps } from '../../translations';
+import type { AppDashboardNavbarProps } from './Navbar';
+interface AppLayoutProps {
+    children: React.ReactNode;
+    appNavbar: AppDashboardNavbarProps;
+    /**
+     * When true, the sidebar will not be rendered
+     * @default false
+     */
+    hideSidebar?: boolean;
+    /**
+     * When true, the navbar will not be rendered
+     * @default false
+     */
+    hideNavbar?: boolean;
+    /**
+     * When true, the AppBreadcrumbNav will not be rendered
+     * @default false
+     */
+    hideBreadcrumbNav?: boolean;
+    /**
+     * When true, enables translation functionality
+     * @default false
+     */
+    enableTranslations?: boolean;
+    /**
+     * Translation provider configuration
+     */
+    translationConfig?: Omit<TranslationProviderProps, 'children'>;
+}
+declare const AppLayout: ({ children, appNavbar, hideSidebar, hideNavbar, hideBreadcrumbNav, enableTranslations, translationConfig, }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default AppLayout;
+export type { AppLayoutProps };

package/lib/components/layout/AppLayout.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSessionTimer } from '../../shared';
+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 isDrawerOpen = useAnyDrawerOpen();
+    const { showModal, countdown, loading, modalDismissed, handleCloseModal, handleRefreshToken } = useSessionTimer();
+    if (loading) {
+        return (_jsx("div", { className: "flex min-h-screen items-center justify-center", children: _jsx(LoaderComponent, {}) }));
+    }
+    const content = (_jsxs(_Fragment, { children: [!hideNavbar && (_jsx(AppDashboardNavbar, { ...appNavbar, hideSidebarToggle: hideSidebar, showLocaleSwitcher: enableTranslations })), _jsxs("div", { className: `flex items-start transition-all duration-300 ${!hideNavbar ? 'mt-16' : ''}`, style: { width: isDrawerOpen ? 'calc(100vw - 420px)' : '100%' }, children: [!hideSidebar && _jsx(AppDashboardSidebar, {}), _jsxs(AppLayoutContent, { isSidebarHidden: hideSidebar, children: [!hideBreadcrumbNav && _jsx(AppBreadcrumbNav, {}), children] }), _jsx(SessionExpiryModal, { show: showModal && !modalDismissed, countdown: countdown, loading: loading, onDismiss: handleCloseModal, onRenew: handleRefreshToken })] })] }));
+    if (enableTranslations) {
+        return (_jsx(TranslationProvider, { defaultLocale: translationConfig?.defaultLocale ?? 'en', localeData: translationConfig?.localeData, loadPath: translationConfig?.loadPath, children: content }));
+    }
+    return content;
+};
+export default AppLayout;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface AuthPageLayoutProps {
+    title: string;
+    subtitle: string;
+    errorMessage: string | null;
+    showLogo?: boolean;
+    logo: React.ReactNode;
+    renderInAppLayout?: boolean;
+    children: React.ReactNode;
+}
+declare const AuthPageLayout: React.FC<AuthPageLayoutProps>;
+export default AuthPageLayout;
+export type { AuthPageLayoutProps };

package/lib/components/layout/AuthPageLayout.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from 'flowbite-react';
+const AuthPageLayout = ({ title, subtitle, errorMessage, logo, showLogo = true, renderInAppLayout = false, children, }) => {
+    return (_jsxs("div", { className: `mx-auto flex w-full max-w-[640px] flex-col items-center justify-center px-4 py-8 sm:px-6 ${renderInAppLayout ? 'h-[calc(100vh-64px)]' : 'min-h-screen md:h-screen'}`, children: [showLogo && logo, _jsxs(Card, { horizontal: true, className: "w-full p-2 sm:p-3", theme: {
+                    root: {
+                        children: 'my-auto w-full gap-0 space-y-6 p-4 sm:p-6 lg:p-12',
+                    },
+                    img: {
+                        horizontal: {
+                            on: 'hidden w-2/3 rounded-l-lg md:w-96 md:p-0 lg:block',
+                        },
+                    },
+                }, children: [_jsxs("div", { children: [_jsx("h2", { className: "text-[1.5em] font-bold text-gray-900 dark:text-white sm:text-[1.875em]", children: title }), _jsx("h2", { className: "text-[1em] font-medium text-gray-600 dark:text-white sm:text-[1em]", children: subtitle })] }), errorMessage && (_jsx("div", { className: "mt-4 rounded border border-red-400 bg-red-100 p-2 text-red-700", children: errorMessage })), children] })] }));
+};
+export default AuthPageLayout;

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

@@ -0,0 +1,2 @@
+declare const AppBreadcrumbNav: () => import("react/jsx-runtime").JSX.Element;
+export default AppBreadcrumbNav;

package/lib/components/layout/BreadcrumbNav.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb } from 'flowbite-react';
+import { useAppBreadcrumbs } from '../../context';
+import { useTranslation } from '../../translations';
+const AppBreadcrumbNav = () => {
+    const { breadcrumbs, pathname, rootPageIcon: PageIcon } = useAppBreadcrumbs();
+    const { t } = useTranslation();
+    return (_jsx(Breadcrumb, { className: "mb-5", children: breadcrumbs.map((item, index) => (_jsx(Breadcrumb.Item, { href: index === breadcrumbs.length - 1 || !item.path ? undefined : item.path, children: _jsxs("div", { className: "flex items-center gap-x-3 text-2xl", children: [index === 0 && PageIcon && _jsx(PageIcon, {}), _jsx("span", { className: "text-sm dark:text-white", children: t(item.label) })] }) }, `breadcrumb-item-${item.path || item.key || index}-${item.label}`))) }, pathname));
+};
+export default AppBreadcrumbNav;

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

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+interface AppLayoutContentProps extends PropsWithChildren {
+    isSidebarHidden?: boolean;
+}
+declare const AppLayoutContent: ({ children, isSidebarHidden }: AppLayoutContentProps) => import("react/jsx-runtime").JSX.Element;
+export default AppLayoutContent;

package/lib/components/layout/LayoutContent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { useAppSidebarContext } from '../../context';
+const AppLayoutContent = ({ children, isSidebarHidden = false }) => {
+    const sidebar = useAppSidebarContext();
+    const sidebarStateClassName = sidebar.desktop.isCollapsed ? 'lg:ml-16' : 'lg:ml-64';
+    const sidebarClassName = isSidebarHidden ? 'ml' : sidebarStateClassName;
+    return (_jsx("div", { id: "main-content", className: twMerge('relative h-full w-full overflow-y-auto', sidebarClassName), children: _jsx("div", { className: "m-4", children: children }) }));
+};
+export default AppLayoutContent;

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

@@ -0,0 +1,106 @@
+import React from 'react';
+interface AppUserDropdownProps {
+    onLogout?: () => void;
+    onSelectProfile: () => void;
+    onSelectChangePassword?: () => void;
+    navbarTextColors?: {
+        brand?: string;
+        general?: string;
+    };
+}
+interface EnvironmentBannerProps {
+    /**
+     * Whether to show the environment banner
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Text to display in the banner
+     * @default ''
+     */
+    text?: string;
+    /**
+     * Background color of the banner
+     * @default 'red'
+     */
+    bgColor?: string;
+    /**
+     * Text color of the banner
+     * @default 'white'
+     */
+    color?: string;
+}
+interface AppDashboardNavbarProps extends AppUserDropdownProps {
+    dashboardLink?: string;
+    brandImage: {
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+    };
+    linkComponent: React.ElementType;
+    showThemeToggler?: boolean;
+    appLabel: string;
+    /**
+     * When true, the sidebar toggle button will not be rendered
+     * @default false
+     */
+    hideSidebarToggle?: boolean;
+    /**
+     * Array of custom components (actions) to be rendered just before the user dropdown
+     */
+    navBarActionComponents?: React.ReactNode[];
+    /**
+     * When true, shows the locale switcher in the navbar
+     * @default false
+     */
+    showLocaleSwitcher?: boolean;
+    /**
+     * Custom locale names to display in the locale switcher
+     */
+    localeNames?: Record<string, string>;
+    /**
+     * Configuration for the environment banner
+     */
+    environmentBanner?: EnvironmentBannerProps;
+    /**
+     * Navbar background color configuration
+     */
+    navbarBackground?: {
+        /**
+         * Background color for light mode
+         * @default 'bg-purple'
+         */
+        light?: string;
+        /**
+         * Background color for dark mode
+         * @default 'dark:bg-gray-800'
+         */
+        dark?: string;
+    };
+    /**
+     * Navbar text color configuration
+     */
+    navbarTextColors?: {
+        /**
+         * Brand text color (e.g., app label)
+         * @default 'text-white'
+         */
+        brand?: string;
+        /**
+         * General text color for navbar elements
+         * @default 'text-white'
+         */
+        general?: string;
+    };
+}
+declare const AppSidebarToggleButton: React.FC<{
+    isMobileOpen: boolean;
+    onToggle: () => void;
+}>;
+declare const AppDarkThemeToggleWithTooltip: React.FC;
+declare const AppUserDropdown: React.MemoExoticComponent<({ onLogout, onSelectChangePassword, onSelectProfile, navbarTextColors, }: AppUserDropdownProps) => import("react/jsx-runtime").JSX.Element>;
+declare const AppDashboardNavbar: React.FC<AppDashboardNavbarProps>;
+export default AppDashboardNavbar;
+export { AppSidebarToggleButton, AppDarkThemeToggleWithTooltip, AppUserDropdown, AppDashboardNavbar };
+export type { AppDashboardNavbarProps, AppUserDropdownProps };

package/lib/components/layout/Navbar.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, DarkThemeToggle, Dropdown, Navbar, Tooltip } from 'flowbite-react';
+import { HiLockClosed, HiLogout, HiMenuAlt1, HiUser, HiX } from 'react-icons/hi';
+import { v4 as uuidv4 } from 'uuid';
+import React, { useCallback } from 'react';
+import { useAuth } from '../../auth';
+import { useAppSidebarContext } from '../../context';
+import { useMediaQueries } from '../../shared';
+import { LocaleSwitcher, useLibTranslations, useTranslation } from '../../translations';
+const AppSidebarToggleButton = React.memo(({ isMobileOpen, onToggle }) => {
+    const { tLib } = useLibTranslations();
+    return (_jsxs("button", { onClick: onToggle, className: "mr-3 cursor-pointer rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), _jsx("div", { className: "md:hidden", children: isMobileOpen ? _jsx(HiX, { className: "h-6 w-6" }) : _jsx(HiMenuAlt1, { className: "h-6 w-6" }) }), _jsx("div", { className: "hidden md:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }));
+});
+const AppDarkThemeToggleWithTooltip = React.memo(() => {
+    const { tLib } = useLibTranslations();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden dark:block", children: _jsx(Tooltip, { content: tLib('theme.toggleLight', 'Toggle light mode'), children: _jsx(DarkThemeToggle, {}) }) }), _jsx("div", { className: "dark:hidden", children: _jsx(Tooltip, { content: tLib('theme.toggleDark', 'Toggle dark mode'), children: _jsx(DarkThemeToggle, {}) }) })] }));
+});
+const AppUserDropdown = React.memo(({ onLogout, onSelectChangePassword, onSelectProfile, navbarTextColors = { general: 'text-white' }, }) => {
+    const { user, logout } = useAuth();
+    const { tLib } = useLibTranslations();
+    const initials = user?.userName
+        ? user.userName
+            .split(' ')
+            .map((name) => name.charAt(0).toUpperCase())
+            .join('')
+        : 'AU';
+    const handleLogout = useCallback(async () => {
+        await logout();
+        onLogout?.();
+    }, [logout, onLogout]);
+    return (_jsxs(Dropdown, { className: "rounded", arrowIcon: false, inline: true, label: _jsxs("span", { className: navbarTextColors.general, children: [_jsx("span", { className: "sr-only", children: user?.userName }), _jsx(Avatar, { rounded: true, size: "sm", placeholderInitials: initials })] }), children: [_jsx(Dropdown.Header, { className: "px-4 py-3", children: _jsx("span", { className: "block text-sm font-medium capitalize text-primary-500", children: user?.userName }) }), _jsx(Dropdown.Item, { onClick: () => onSelectProfile(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiUser, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('userProfile', 'User Profile') })] }) }), _jsx(Dropdown.Item, { onClick: () => onSelectChangePassword?.(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLockClosed, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('changePassword', 'Change Password') })] }) }), _jsx(Dropdown.Divider, {}), _jsx(Dropdown.Item, { onClick: handleLogout, children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLogout, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('signOut', 'Sign Out') })] }) })] }));
+});
+const EnvironmentBanner = ({ show = false, text = 'UAT', bgColor = 'red', color = 'black', }) => {
+    if (!show)
+        return null;
+    return (_jsx("div", { className: "fixed top-0 right-10 z-[110]", style: {
+            transform: 'rotate(45deg)',
+            transformOrigin: 'top right',
+            top: '100px',
+            right: '-20px',
+        }, children: _jsx("div", { className: `flex items-center justify-center h-4 px-12 py-1 shadow-lg`, style: {
+                backgroundColor: bgColor,
+                minWidth: '160px',
+            }, children: _jsx("span", { className: "text-xs text-center font-bold tracking-wider uppercase whitespace-nowrap", style: {
+                    color,
+                    textShadow: '0 1px 2px rgba(0,0,0,0.3)',
+                    letterSpacing: '0.1em',
+                }, children: text }) }) }));
+};
+const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComponent, showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], showLocaleSwitcher = false, localeNames, environmentBanner = { show: false }, navbarBackground = { light: 'bg-purple', dark: 'dark:bg-gray-800' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, }) => {
+    const sidebar = useAppSidebarContext();
+    const { isMd } = useMediaQueries();
+    const { t } = useTranslation();
+    const handleToggleSidebar = useCallback(() => {
+        if (isMd) {
+            sidebar.desktop.toggle();
+        }
+        else {
+            sidebar.mobile.toggle();
+        }
+    }, [isMd, sidebar.desktop, sidebar.mobile]);
+    const navbarClasses = `fixed top-0 w-full border-b border-gray-200 ${navbarBackground.light} p-0 dark:border-gray-700 ${navbarBackground.dark} sm:p-0`;
+    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { fluid: true, className: navbarClasses, style: { zIndex: 100 }, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [!hideSidebarToggle && (_jsx(AppSidebarToggleButton, { isMobileOpen: sidebar.mobile.isOpen, onToggle: handleToggleSidebar })), _jsxs(Navbar.Brand, { as: linkComponent, href: dashboardLink, className: "mr-14", children: [brandImage && (_jsx("img", { src: brandImage.src, alt: t(brandImage.alt), width: brandImage.width, height: brandImage.height, className: "h-8" })), _jsx("p", { className: `font-bold ${navbarTextColors.brand} text-[15px] mb-0`, children: t(appLabel) })] })] }), _jsxs("div", { className: "flex items-center lg:gap-3", children: [navBarActionComponents.map((action) => (_jsx(React.Fragment, { children: action }, `app-nav-bar-component-${uuidv4()}`))), showThemeToggler && _jsx(AppDarkThemeToggleWithTooltip, {}), showLocaleSwitcher && (_jsx("div", { className: `mx-2 ${navbarTextColors.general}`, children: _jsx(LocaleSwitcher, { localeNames: localeNames, className: "min-w-[120px] text-sm text-white bg-white z-50" }) })), _jsx("div", { className: "flex items-center", children: _jsx(AppUserDropdown, { onLogout: onLogout, onSelectChangePassword: onSelectChangePassword, onSelectProfile: onSelectProfile, navbarTextColors: navbarTextColors }) })] })] }) }) }), _jsx(EnvironmentBanner, { ...environmentBanner })] }));
+};
+export default AppDashboardNavbar;
+export { AppSidebarToggleButton, AppDarkThemeToggleWithTooltip, AppUserDropdown, AppDashboardNavbar };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AppPageHeaderProps {
+    title: string;
+    description?: string;
+}
+declare const AppPageHeader: ({ title, description }: AppPageHeaderProps) => React.JSX.Element;
+export default AppPageHeader;
+export type { AppPageHeaderProps };

package/lib/components/layout/PageHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '../../translations';
+const AppPageHeader = ({ title, description }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: t(title) }), description && _jsx("p", { className: "text-1xl text-gray-600", children: t(description) })] }));
+};
+export default AppPageHeader;

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

@@ -0,0 +1,10 @@
+interface SessionExpiryModalProps {
+    show: boolean;
+    countdown: number;
+    loading: boolean;
+    onDismiss: () => void;
+    onRenew: () => void;
+}
+declare const SessionExpiryModal: ({ show, countdown, loading, onDismiss, onRenew }: SessionExpiryModalProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionExpiryModal;
+export type { SessionExpiryModalProps };

package/lib/components/layout/SessionExpiryModal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from 'flowbite-react';
+import { useLibTranslations } from '../../translations';
+import { Button } from '../ui';
+const SessionExpiryModal = ({ show, countdown, loading, onDismiss, onRenew }) => {
+    const { tLib } = useLibTranslations();
+    return (_jsxs(Modal, { show: show, onClose: onDismiss, children: [_jsx(Modal.Header, { children: tLib('sessionExpiryModal.title', 'Session about to expire due to inactivity') }), _jsx(Modal.Body, { children: _jsx("div", { className: "space-y-6 p-6", children: _jsx("p", { className: "text-base leading-relaxed text-gray-500 dark:text-gray-400", children: tLib('sessionExpiryModal.message', `Your session will end in ${countdown} seconds and you will be automatically logged out.`) }) }) }), _jsx(Modal.Footer, { children: _jsxs("div", { className: "flex w-full justify-end space-x-2", children: [_jsx(Button, { onClick: onDismiss, variant: "outline", disabled: loading, children: tLib('sessionExpiryModal.dismiss', 'Log Out') }), _jsx(Button, { onClick: onRenew, variant: "primary", disabled: loading, children: tLib('sessionExpiryModal.renew', 'Stay logged in') })] }) })] }));
+};
+export default SessionExpiryModal;

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

@@ -0,0 +1,6 @@
+declare const AppSidebarMenu: () => import("react/jsx-runtime").JSX.Element;
+declare const AppMobileSidebar: () => import("react/jsx-runtime").JSX.Element | null;
+declare const AppDesktopSidebar: () => import("react/jsx-runtime").JSX.Element;
+declare const AppDashboardSidebar: () => import("react/jsx-runtime").JSX.Element;
+export default AppDashboardSidebar;
+export { AppSidebarMenu, AppMobileSidebar, AppDesktopSidebar, AppDashboardSidebar };