@pagamio/frontend-commons-lib 0.8.206 → 0.8.208

package/lib/components/layout/Sidebar.js

@@ -5,8 +5,13 @@ import React, { useEffect, useState } from 'react';
 import { useAppSidebarContext } from '../../context';
 import { useLibTranslations, useTranslation } from '../../translations';
 const AppSidebarMenu = () => {
-    const { pages } = useAppSidebarContext();
-    return (_jsx(Sidebar.Items, { children: pages.map((item) => (_jsx(Sidebar.ItemGroup, { children: _jsx(AppSidebarItem, { ...item }) }, item.label))) }));
+    const { pages, groupByItem } = useAppSidebarContext();
+    // If groupByItem is true each item gets its own ItemGroup
+    if (groupByItem) {
+        return (_jsx(Sidebar.Items, { children: pages.map((item) => (_jsx(Sidebar.ItemGroup, { children: _jsx(AppSidebarItem, { ...item }) }, item.label))) }));
+    }
+    // Default behavior all items in one ItemGroup
+    return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
 };
 const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
     const { pathname, linkComponent: Link } = useAppSidebarContext();

package/lib/context/SidebarContext.d.ts

@@ -20,6 +20,7 @@ interface AppSidebarPageItem {
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
+ * @property {boolean} groupByItem - If true, each sidebar item gets its own ItemGroup. If false, all items share one ItemGroup.
  */
 interface AppSidebarContextProps {
     desktop: {
@@ -37,6 +38,7 @@ interface AppSidebarContextProps {
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
     sidebarFooter?: React.ReactNode;
+    groupByItem?: boolean;
 }
 /**
  * Props for the AppSidebarProvider component
@@ -48,6 +50,7 @@ interface AppSidebarContextProps {
  * @property {ReactNode} children - Child components
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
+ * @property {boolean} groupByItem - If true, each sidebar item gets its own ItemGroup. If false (default), all items share one ItemGroup.
  */
 interface AppSidebarProviderProps extends PropsWithChildren {
     initialCollapsed: boolean;
@@ -56,12 +59,13 @@ interface AppSidebarProviderProps extends PropsWithChildren {
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
     sidebarFooter?: React.ReactNode;
+    groupByItem?: boolean;
 }
 /**
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, groupByItem, }: 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, sidebarHeader, sidebarFooter, }) => {
+const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, groupByItem = false, }) => {
     const [isOpenMobile, setIsOpenMobile] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
     function handleSetCollapsed(value) {
@@ -30,7 +30,8 @@ const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkC
         linkComponent,
         sidebarHeader,
         sidebarFooter,
-    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader, sidebarFooter]);
+        groupByItem,
+    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, groupByItem]);
     return _jsx(AppSidebarContext.Provider, { value: value, children: children });
 };
 /**

package/lib/helpers/validations.d.ts

@@ -27,8 +27,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    confirmPassword: string;
     emailAddress: string;
+    confirmPassword: string;
     profile: string;
     role?: string | undefined;
 }, {
@@ -36,8 +36,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    confirmPassword: string;
     emailAddress: string;
+    confirmPassword: string;
     profile: string;
     role?: string | undefined;
 }>, {
@@ -45,8 +45,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    confirmPassword: string;
     emailAddress: string;
+    confirmPassword: string;
     profile: string;
     role?: string | undefined;
 }, {
@@ -54,8 +54,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    confirmPassword: string;
     emailAddress: string;
+    confirmPassword: string;
     profile: string;
     role?: string | undefined;
 }>, {
@@ -63,8 +63,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    confirmPassword: string;
     emailAddress: string;
+    confirmPassword: string;
     profile: string;
     role?: string | undefined;
 }, {
@@ -72,8 +72,8 @@ export declare const signupFormSchema: z.ZodEffects<z.ZodEffects<z.ZodObject<{
     password: string;
     firstName: string;
     lastName: string;
-    confirmPassword: string;
     emailAddress: string;
+    confirmPassword: string;
     profile: string;
     role?: string | undefined;
 }>;

package/lib/pagamio-table/data-table/ExportButton.d.ts

@@ -52,6 +52,10 @@ type ExportDropdownProps<T extends Record<string, any>> = {
     csvOptions?: CsvExportOptions;
     exportAll?: boolean;
     fetchData?: (params?: Record<string, string>) => Promise<T[]>;
+    enableEmailExport?: boolean;
+    emailExportApiUrl?: string;
+    onEmailExportSuccess?: (message: string) => void;
+    onEmailExportError?: (error: Error) => void;
 };
-declare const ExportDropdown: <T extends Record<string, any>>({ data, columns, containerClassName, buttonClassName, extraOptions, pdfOptions, xlsxOptions, csvOptions, exportAll, fetchData, }: ExportDropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const ExportDropdown: <T extends Record<string, any>>({ data, columns, containerClassName, buttonClassName, extraOptions, pdfOptions, xlsxOptions, csvOptions, exportAll, fetchData, enableEmailExport, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }: ExportDropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ExportDropdown;

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

@@ -1,15 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Stack } from '@mantine/core';
-import { Checkbox, Label } from 'flowbite-react';
+import { Checkbox, Label, TextInput } from 'flowbite-react';
+import { HiMail } from 'react-icons/hi';
 import { useEffect, useRef, useState } from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
-import { exportToCsv, exportToPdf, exportToXlsx } from './exportUtils';
-const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, }) => {
+import { Modal, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
+import { exportToCsv, exportToPdf, exportToXlsx, generateExportAsBase64, sendExportEmail } from './exportUtils';
+const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, enableEmailExport = false, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }) => {
     const [exportType, setExportType] = useState(null);
     const [excludedColumns, setExcludedColumns] = useState(['action']);
     const [isExporting, setIsExporting] = useState(false);
     const [exportAllData, setExportAllData] = useState(false);
     const [selectOpen, setSelectOpen] = useState(false);
+    const [emailAddress, setEmailAddress] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [showEmailModal, setShowEmailModal] = useState(false);
+    const [pendingExportData, setPendingExportData] = useState(null);
+    const [pendingEmailFormat, setPendingEmailFormat] = useState(null);
     const popoverRef = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
@@ -26,6 +32,22 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
         { value: 'csv', label: 'Export as CSV' },
         { value: 'xlsx', label: 'Export as XLSX' },
         { value: 'pdf', label: 'Export as PDF' },
+        ...(enableEmailExport
+            ? [
+                {
+                    value: 'email-csv',
+                    label: (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(HiMail, { className: "w-4 h-4" }), " Email as CSV"] })),
+                },
+                {
+                    value: 'email-xlsx',
+                    label: (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(HiMail, { className: "w-4 h-4" }), " Email as XLSX"] })),
+                },
+                {
+                    value: 'email-pdf',
+                    label: (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(HiMail, { className: "w-4 h-4" }), " Email as PDF"] })),
+                },
+            ]
+            : []),
     ];
     const handleCheckboxChange = (columnKey, checked) => {
         setExcludedColumns((prev) => (checked ? [...prev, columnKey] : prev.filter((key) => key !== columnKey)));
@@ -33,42 +55,104 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
     const getIncludedColumns = () => {
         return columns.filter((col) => !excludedColumns.includes(col.accessorKey));
     };
+    const isEmailExport = exportType?.startsWith('email-');
+    const emailFormat = isEmailExport ? exportType?.replace('email-', '') : null;
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+    const performExport = async (exportData, includedColumns) => {
+        if (exportType === 'csv') {
+            exportToCsv(exportData, includedColumns, csvOptions);
+        }
+        else if (exportType === 'xlsx') {
+            exportToXlsx(exportData, includedColumns, xlsxOptions);
+        }
+        else if (exportType === 'pdf') {
+            await exportToPdf(exportData, includedColumns, {
+                title: pdfOptions?.title || 'Data Export',
+                subtitle: pdfOptions?.subtitle,
+                colors: pdfOptions?.colors,
+                logo: pdfOptions?.logo,
+            });
+        }
+    };
+    const handleEmailModalSubmit = async () => {
+        console.log('handleEmailModalSubmit called');
+        console.log('emailAddress:', emailAddress);
+        console.log('pendingExportData:', pendingExportData);
+        console.log('pendingEmailFormat:', pendingEmailFormat);
+        if (!emailAddress.trim() || !validateEmail(emailAddress)) {
+            setEmailError(emailAddress.trim() ? 'Please enter a valid email address' : 'Email address is required');
+            return;
+        }
+        if (!pendingExportData || !pendingEmailFormat) {
+            console.log('Missing pendingExportData or pendingEmailFormat');
+            return;
+        }
+        setEmailError('');
+        setIsExporting(true);
+        try {
+            console.log('Generating export as base64...');
+            const base64File = await generateExportAsBase64(pendingExportData.data, pendingExportData.columns, pendingEmailFormat, { pdfOptions, xlsxOptions, csvOptions });
+            console.log('Base64 file generated, length:', base64File.length);
+            console.log('Sending email to:', emailAddress);
+            const result = await sendExportEmail(emailAddress, base64File, emailExportApiUrl);
+            console.log('Email sent successfully:', result);
+            onEmailExportSuccess?.(result || 'Export sent successfully to your email');
+            setEmailAddress('');
+            setShowEmailModal(false);
+            setPendingExportData(null);
+            setPendingEmailFormat(null);
+        }
+        catch (error) {
+            console.error('Email export failed:', error);
+            onEmailExportError?.(error instanceof Error ? error : new Error('Failed to send email'));
+            setEmailError('Failed to send email. Please try again.');
+        }
+        finally {
+            setIsExporting(false);
+        }
+    };
+    const handleEmailModalClose = () => {
+        setShowEmailModal(false);
+        setEmailAddress('');
+        setEmailError('');
+        setPendingExportData(null);
+        setPendingEmailFormat(null);
+        setIsExporting(false);
+    };
     const handleContinue = async () => {
         const includedColumns = getIncludedColumns();
         setIsExporting(true);
         try {
-            let exportData = data;
-            // If exportAll is checked and fetchData function is provided, fetch all data
-            if (exportAllData && fetchData) {
-                exportData = await fetchData({ exportAll: 'true' });
-            }
-            if (exportType === 'csv') {
-                exportToCsv(exportData, includedColumns, csvOptions);
-            }
-            else if (exportType === 'xlsx') {
-                exportToXlsx(exportData, includedColumns, xlsxOptions);
+            const exportData = exportAllData && fetchData ? await fetchData({ exportAll: 'true' }) : data;
+            if (isEmailExport) {
+                // Store data, format and show email modal
+                setPendingExportData({ data: exportData, columns: includedColumns });
+                setPendingEmailFormat(emailFormat); // Store the format before closing popover
+                setShowEmailModal(true);
+                setExportType(null); // Close the popover
             }
-            else if (exportType === 'pdf') {
-                // Pass PDF options with enhanced configuration
-                await exportToPdf(exportData, includedColumns, {
-                    title: pdfOptions?.title || 'Data Export',
-                    subtitle: pdfOptions?.subtitle,
-                    colors: pdfOptions?.colors,
-                    logo: pdfOptions?.logo,
-                });
+            else {
+                await performExport(exportData, includedColumns);
+                setExportType(null);
             }
         }
         catch (error) {
             console.error('Export failed:', error);
+            if (isEmailExport) {
+                onEmailExportError?.(error instanceof Error ? error : new Error('Export failed'));
+            }
         }
         finally {
             setIsExporting(false);
-            setExportType(null);
         }
     };
     const handleExportChange = (type) => {
         if (!type || type === 'none') {
             setExportType(null);
+            setEmailError('');
             return;
         }
         // Check if type is an extraOption
@@ -89,6 +173,23 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
                         }) }), _jsx("button", { className: `w-full mt-4 px-4 py-2 rounded-md text-white flex items-center justify-center 
               ${getIncludedColumns().length === 0 || isExporting
                             ? 'bg-gray-300 cursor-not-allowed'
-                            : 'bg-primary-500 hover:bg-primary-600'}`, onClick: handleContinue, disabled: getIncludedColumns().length === 0 || isExporting, children: isExporting ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Exporting..."] })) : ('Continue') })] }))] }));
+                            : 'bg-primary-500 hover:bg-primary-600'}`, onClick: handleContinue, disabled: getIncludedColumns().length === 0 || isExporting, children: isExporting ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), isEmailExport ? 'Preparing...' : 'Exporting...'] })) : ('Continue') })] })), _jsx(Modal, { isOpen: showEmailModal, onClose: handleEmailModalClose, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiMail, { className: "w-5 h-5 text-primary-500" }), _jsx("span", { children: "Send Export via Email" })] }), size: "md", primaryButton: {
+                    label: 'Send Email',
+                    onClick: () => {
+                        handleEmailModalSubmit().catch((error) => {
+                            console.error('Error in handleEmailModalSubmit:', error);
+                        });
+                    },
+                    loading: isExporting,
+                    disabled: isExporting || !emailAddress.trim(),
+                }, secondaryButton: {
+                    label: 'Cancel',
+                    onClick: handleEmailModalClose,
+                    disabled: isExporting,
+                    variant: 'outline',
+                }, children: _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-gray-600", children: "Enter your email address to receive the export file as an attachment." }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: "modal-export-email", className: "mb-2 block", children: ["Email Address ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(TextInput, { id: "modal-export-email", type: "email", placeholder: "your.email@example.com", value: emailAddress, onChange: (e) => {
+                                        setEmailAddress(e.target.value);
+                                        setEmailError('');
+                                    }, color: emailError ? 'failure' : undefined, helperText: emailError || undefined, disabled: isExporting, autoFocus: true })] }), pendingEmailFormat && (_jsx("div", { className: "p-3 bg-blue-50 rounded-md border border-blue-200", children: _jsxs("p", { className: "text-xs text-blue-800", children: [_jsx("strong", { children: "Export Format:" }), " ", pendingEmailFormat.toUpperCase()] }) }))] }) })] }));
 };
 export default ExportDropdown;

package/lib/pagamio-table/data-table/TableToolbar.d.ts

@@ -1,3 +1,3 @@
 import { type TableToolbarProps } from './types';
-declare const TableToolbar: <T extends Record<string, any>>({ searchable, searchQuery, onSearch, filters, appliedFilters, exportable, columns, data, onTableFilter, addButton, addText, searctInputPlaceHolder, onAdd, handleSearchTable, handleApplyFilters, onClearFilters, showClearFilters, showApplyFilterButton, isNarrow, extraExportOptions, pdfExportOptions, xlsxExportOptions, csvExportOptions, exportAll, fetchData, }: TableToolbarProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableToolbar: <T extends Record<string, any>>({ searchable, searchQuery, onSearch, filters, appliedFilters, exportable, columns, data, onTableFilter, addButton, addText, searctInputPlaceHolder, onAdd, handleSearchTable, handleApplyFilters, onClearFilters, showClearFilters, showApplyFilterButton, isNarrow, extraExportOptions, pdfExportOptions, xlsxExportOptions, csvExportOptions, exportAll, fetchData, enableEmailExport, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }: TableToolbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableToolbar;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HiPlusSm } from 'react-icons/hi';
 import { FilterComponent, IconButton } from '../../components';
 import ExportDropdown from './ExportButton';
-const TableToolbar = ({ searchable, searchQuery, onSearch, filters = [], appliedFilters, exportable, columns, data, onTableFilter = () => { }, addButton, addText, searctInputPlaceHolder, onAdd = () => { }, handleSearchTable, handleApplyFilters, onClearFilters = () => { }, showClearFilters = false, showApplyFilterButton = true, isNarrow, extraExportOptions = [], pdfExportOptions, xlsxExportOptions, csvExportOptions, exportAll, fetchData, }) => {
+const TableToolbar = ({ searchable, searchQuery, onSearch, filters = [], appliedFilters, exportable, columns, data, onTableFilter = () => { }, addButton, addText, searctInputPlaceHolder, onAdd = () => { }, handleSearchTable, handleApplyFilters, onClearFilters = () => { }, showClearFilters = false, showApplyFilterButton = true, isNarrow, extraExportOptions = [], pdfExportOptions, xlsxExportOptions, csvExportOptions, exportAll, fetchData, enableEmailExport, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }) => {
     const handleFilter = (columnKey, value) => {
         onTableFilter(columnKey, value ?? '');
     };
@@ -19,6 +19,6 @@ const TableToolbar = ({ searchable, searchQuery, onSearch, filters = [], applied
             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) }))] }) }));
+        }, 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, enableEmailExport: enableEmailExport, emailExportApiUrl: emailExportApiUrl, onEmailExportSuccess: onEmailExportSuccess, onEmailExportError: onEmailExportError }) })), 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/lib/pagamio-table/data-table/exportUtils.d.ts

@@ -39,4 +39,19 @@ interface CsvExportOptions {
 export declare const exportToCsv: <T extends Record<string, any>>(data: T[], columns: MRT_ColumnDef<T>[], options?: CsvExportOptions) => void;
 export declare const exportToXlsx: <T extends Record<string, any>>(data: T[], columns: MRT_ColumnDef<T>[], options?: XlsxExportOptions) => void;
 export declare const exportToPdf: <T extends Record<string, any>>(data: T[], columns: MRT_ColumnDef<T>[], options?: PdfExportOptions) => Promise<void>;
+/**
+ * Sends an export file to the user via email
+ * @param email - The recipient email address
+ * @param file - Base64 encoded file string
+ * @param baseUrl - The API base URL (optional, defaults to /api/v1)
+ */
+export declare const sendExportEmail: (email: string, file: string, baseUrl?: string) => Promise<string>;
+/**
+ * Generates export file as base64 string for email sending
+ */
+export declare const generateExportAsBase64: <T extends Record<string, any>>(data: T[], columns: MRT_ColumnDef<T>[], format: "csv" | "xlsx" | "pdf", options?: {
+    pdfOptions?: PdfExportOptions;
+    xlsxOptions?: XlsxExportOptions;
+    csvOptions?: CsvExportOptions;
+}) => Promise<string>;
 export {};

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

@@ -780,3 +780,68 @@ export const exportToPdf = async (data, columns, options = {}) => {
     const filename = `${title.toLowerCase().replace(/\s+/g, '_')}_${timestamp}.pdf`;
     doc.save(filename);
 };
+/**
+ * Sends an export file to the user via email
+ * @param email - The recipient email address
+ * @param file - Base64 encoded file string
+ * @param baseUrl - The API base URL (optional, defaults to /api/v1)
+ */
+export const sendExportEmail = async (email, file, baseUrl = '/api/v1') => {
+    const response = await fetch(`${baseUrl}/exports/send-email?email=${encodeURIComponent(email)}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ file }),
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to send email: ${response.statusText}`);
+    }
+    return response.text();
+};
+/**
+ * Generates export file as base64 string for email sending
+ */
+export const generateExportAsBase64 = async (data, columns, format, options) => {
+    if (format === 'csv') {
+        const visibleColumns = columns.filter((col) => col.accessorKey !== 'action');
+        const headers = visibleColumns.map((col) => String(col.header ?? col.accessorKey));
+        const rows = data.map((row) => visibleColumns.map((col) => {
+            const key = col.accessorKey;
+            const value = row[key];
+            return value !== null && value !== undefined ? String(value) : '';
+        }));
+        const csvContent = Papa.unparse({ fields: headers, data: rows });
+        return btoa(csvContent);
+    }
+    if (format === 'xlsx') {
+        const visibleColumns = columns.filter((col) => col.accessorKey !== 'action');
+        const headers = visibleColumns.map((col) => String(col.header ?? col.accessorKey));
+        const rows = data.map((row) => visibleColumns.map((col) => {
+            const key = col.accessorKey;
+            return row[key] ?? '';
+        }));
+        const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows]);
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, options?.xlsxOptions?.sheetName || 'Data');
+        const xlsxData = XLSX.write(workbook, { bookType: 'xlsx', type: 'base64' });
+        return xlsxData;
+    }
+    if (format === 'pdf') {
+        const doc = new jsPDF();
+        const visibleColumns = columns.filter((col) => col.accessorKey !== 'action');
+        const headers = visibleColumns.map((col) => String(col.header ?? col.accessorKey));
+        const rows = data.map((row) => visibleColumns.map((col) => {
+            const key = col.accessorKey;
+            const value = row[key];
+            return value !== null && value !== undefined ? String(value) : '';
+        }));
+        doc.autoTable({
+            head: [headers],
+            body: rows,
+            startY: 20,
+        });
+        return doc.output('datauristring').split(',')[1];
+    }
+    throw new Error(`Unsupported format: ${format}`);
+};

package/lib/pagamio-table/data-table/index.d.ts

@@ -1,5 +1,5 @@
 import { type PagamioMantineTableProps } from './types';
 declare const PagamioTable: <T extends {
     id: string | number;
-}>({ columns, data, isLoading, pagination, sorting, filtering, search, exportable, addButton, addText, onAdd, onClearFilters, handleSearchTable, showClearFilters, showApplyFilterButton, searctInputPlaceHolder, expandable, extraExportOptions, pdfExportOptions, xlsxExportOptions, csvExportOptions, renderExpandableComponent, onRowClick, rowClassName, ...props }: PagamioMantineTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+}>({ columns, data, isLoading, pagination, sorting, filtering, search, exportable, addButton, addText, onAdd, onClearFilters, handleSearchTable, showClearFilters, showApplyFilterButton, searctInputPlaceHolder, expandable, extraExportOptions, pdfExportOptions, xlsxExportOptions, csvExportOptions, renderExpandableComponent, onRowClick, rowClassName, enableEmailExport, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, ...props }: PagamioMantineTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PagamioTable;

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMediaQueries } from '../../shared';
 import CoreTable from './MantineCoreTable';
 import TableToolbar from './TableToolbar';
-const PagamioTable = ({ columns, data, isLoading, pagination, sorting, filtering, search, exportable = false, addButton = false, addText, onAdd, onClearFilters, handleSearchTable, showClearFilters = false, showApplyFilterButton = true, searctInputPlaceHolder, expandable = false, extraExportOptions, pdfExportOptions, xlsxExportOptions, csvExportOptions, renderExpandableComponent, onRowClick, rowClassName, ...props }) => {
+const PagamioTable = ({ columns, data, isLoading, pagination, sorting, filtering, search, exportable = false, addButton = false, addText, onAdd, onClearFilters, handleSearchTable, showClearFilters = false, showApplyFilterButton = true, searctInputPlaceHolder, expandable = false, extraExportOptions, pdfExportOptions, xlsxExportOptions, csvExportOptions, renderExpandableComponent, onRowClick, rowClassName, enableEmailExport, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, ...props }) => {
     const hasPagination = pagination?.enabled;
     const { isSm, isXs } = useMediaQueries();
     const isNarrow = isXs || isSm;
-    return (_jsxs("div", { className: "mt-2", children: [_jsx(TableToolbar, { searchable: search?.enabled ?? false, searchQuery: search?.searchQuery ?? '', onSearch: search?.onSearch ?? (() => { }), filters: filtering?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onTableFilter: filtering?.onTableFilter ?? (() => { }), exportable: exportable, addButton: addButton, addText: addText, onAdd: onAdd ?? (() => { }), handleSearchTable: handleSearchTable, onClearFilters: onClearFilters, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, searctInputPlaceHolder: searctInputPlaceHolder, data: data, columns: columns, isNarrow: isNarrow, extraExportOptions: extraExportOptions, pdfExportOptions: pdfExportOptions, xlsxExportOptions: xlsxExportOptions, csvExportOptions: csvExportOptions, exportAll: props.exportAll, fetchData: props.fetchData }), _jsx("div", { className: "border border-gray-200 rounded-md overflow-hidden", children: _jsx(CoreTable, { columns: columns, data: data, isLoading: isLoading, onSort: sorting?.onSort, sortConfig: sorting?.sortConfig ?? null, multiSorting: sorting?.multiSorting || false, sortable: props.sortable, setSortBy: sorting?.setSortBy, setSortDir: sorting?.setSortDir, enablePagination: hasPagination, pagination: pagination, expandable: expandable, onRowClick: onRowClick, rowClassName: rowClassName, renderExpandableComponent: renderExpandableComponent, ...props }) })] }));
+    return (_jsxs("div", { className: "mt-2", children: [_jsx(TableToolbar, { searchable: search?.enabled ?? false, searchQuery: search?.searchQuery ?? '', onSearch: search?.onSearch ?? (() => { }), filters: filtering?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onTableFilter: filtering?.onTableFilter ?? (() => { }), exportable: exportable, addButton: addButton, addText: addText, onAdd: onAdd ?? (() => { }), handleSearchTable: handleSearchTable, onClearFilters: onClearFilters, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, searctInputPlaceHolder: searctInputPlaceHolder, data: data, columns: columns, isNarrow: isNarrow, extraExportOptions: extraExportOptions, pdfExportOptions: pdfExportOptions, xlsxExportOptions: xlsxExportOptions, csvExportOptions: csvExportOptions, exportAll: props.exportAll, fetchData: props.fetchData, enableEmailExport: enableEmailExport, emailExportApiUrl: emailExportApiUrl, onEmailExportSuccess: onEmailExportSuccess, onEmailExportError: onEmailExportError }), _jsx("div", { className: "border border-gray-200 rounded-md overflow-hidden", children: _jsx(CoreTable, { columns: columns, data: data, isLoading: isLoading, onSort: sorting?.onSort, sortConfig: sorting?.sortConfig ?? null, multiSorting: sorting?.multiSorting || false, sortable: props.sortable, setSortBy: sorting?.setSortBy, setSortDir: sorting?.setSortDir, enablePagination: hasPagination, pagination: pagination, expandable: expandable, onRowClick: onRowClick, rowClassName: rowClassName, renderExpandableComponent: renderExpandableComponent, ...props }) })] }));
 };
 export default PagamioTable;

package/lib/pagamio-table/data-table/types.d.ts

@@ -114,6 +114,10 @@ export type PagamioMantineTableProps<T extends Record<string, any>> = {
         row: MRT_Row<T>;
         table: MRT_TableInstance<T>;
     }) => React.ReactNode;
+    enableEmailExport?: boolean;
+    emailExportApiUrl?: string;
+    onEmailExportSuccess?: (message: string) => void;
+    onEmailExportError?: (error: Error) => void;
 };
 export type TableToolbarProps<T extends Record<string, any>> = {
     searchable: boolean;
@@ -141,6 +145,10 @@ export type TableToolbarProps<T extends Record<string, any>> = {
     csvExportOptions?: CsvExportOptions;
     exportAll?: boolean;
     fetchData?: (params?: Record<string, string>) => Promise<T[]>;
+    enableEmailExport?: boolean;
+    emailExportApiUrl?: string;
+    onEmailExportSuccess?: (message: string) => void;
+    onEmailExportError?: (error: Error) => void;
 };
 export interface BaseEntity {
     id: number | string;

package/lib/pagamio-table/index.d.ts

@@ -1,4 +1,5 @@
 export { default } from './data-table/index';
 export * from './data-table/types';
 export * from './data-table/pdfExportUtils';
+export { sendExportEmail, generateExportAsBase64 } from './data-table/exportUtils';
 export * from './utils';

package/lib/pagamio-table/index.js

@@ -1,4 +1,5 @@
 export { default } from './data-table/index';
 export * from './data-table/types';
 export * from './data-table/pdfExportUtils';
+export { sendExportEmail, generateExportAsBase64 } from './data-table/exportUtils';
 export * from './utils';

package/lib/styles.css

@@ -2211,6 +2211,10 @@ input[type="range"]::-ms-fill-lower {
 .border-dashed {
   border-style: dashed;
 }
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(195 221 253 / var(--tw-border-opacity, 1));
+}
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(63 131 248 / var(--tw-border-opacity, 1));

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.206",
+  "version": "0.8.208",
   "publishConfig": {
     "access": "public",
     "provenance": false