@pagamio/frontend-commons-lib 0.8.356 → 0.8.358

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

@@ -51,11 +51,18 @@ type ExportDropdownProps<T extends Record<string, any>> = {
     xlsxOptions?: XlsxExportOptions;
     csvOptions?: CsvExportOptions;
     exportAll?: boolean;
-    fetchData?: (params?: Record<string, string>) => Promise<T[]>;
+    fetchData?: (params?: Record<string, string>, onProgress?: (fetched: number, total: number) => void) => Promise<T[]>;
+    asyncExport?: {
+        threshold: number;
+        totalRows: number;
+        requestExport: (format: 'csv' | 'xlsx' | 'pdf') => Promise<void>;
+        onQueued?: (message: string) => void;
+        onError?: (error: Error) => void;
+    };
     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, enableEmailExport, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }: 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, asyncExport, enableEmailExport, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }: ExportDropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ExportDropdown;

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

@@ -5,10 +5,11 @@ import { HiMail } from 'react-icons/hi';
 import { useEffect, useRef, useState } from 'react';
 import { Button, Modal, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
 import { exportToCsv, exportToPdf, exportToXlsx, generateExportAsFile, sendExportEmail } from './exportUtils';
-const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, enableEmailExport = false, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }) => {
+const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, asyncExport, enableEmailExport = false, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }) => {
     const [exportType, setExportType] = useState(null);
     const [excludedColumns, setExcludedColumns] = useState(['action']);
     const [isExporting, setIsExporting] = useState(false);
+    const [exportProgress, setExportProgress] = useState(null);
     const [exportAllData, setExportAllData] = useState(false);
     const [selectOpen, setSelectOpen] = useState(false);
     const [emailAddress, setEmailAddress] = useState('');
@@ -113,11 +114,31 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
         setPendingEmailFormat(null);
         setIsExporting(false);
     };
+    // When exporting all and the dataset is too large to pull into the browser,
+    // hand off to the async backend job instead of paging through it client-side.
+    const shouldQueueAsync = exportAllData && !!asyncExport && asyncExport.totalRows > asyncExport.threshold;
     const handleContinue = async () => {
         const includedColumns = getIncludedColumns();
         setIsExporting(true);
+        setExportProgress(null);
         try {
-            const exportData = exportAllData && fetchData ? await fetchData({ exportAll: 'true' }) : data;
+            if (shouldQueueAsync && asyncExport) {
+                // Async path: server generates the file off the request path and
+                // delivers it via export history / email. Nothing to render here.
+                const format = (isEmailExport ? emailFormat : exportType);
+                try {
+                    await asyncExport.requestExport(format);
+                    asyncExport.onQueued?.('Your export is being prepared. It will appear in export history when ready.');
+                }
+                catch (err) {
+                    asyncExport.onError?.(err instanceof Error ? err : new Error('Export request failed'));
+                }
+                setExportType(null);
+                return;
+            }
+            const exportData = exportAllData && fetchData
+                ? await fetchData({ exportAll: 'true' }, (fetched, total) => setExportProgress({ fetched, total }))
+                : data;
             if (isEmailExport) {
                 // Store data, format and show email modal
                 setPendingExportData({ data: exportData, columns: includedColumns });
@@ -138,6 +159,7 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
         }
         finally {
             setIsExporting(false);
+            setExportProgress(null);
         }
     };
     const handleExportChange = (type) => {
@@ -157,14 +179,20 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
     };
     // Show popover when exportType is set and Select is closed
     const popoverOpened = exportType !== null && !selectOpen;
-    return (_jsxs("div", { className: `w-40 ${containerClassName ?? ''}`, children: [_jsxs(Select, { value: exportType ?? 'none', open: selectOpen, onOpenChange: setSelectOpen, onValueChange: (value) => handleExportChange(value === 'none' ? null : value), children: [_jsx(SelectTrigger, { className: `w-full ${buttonClassName ?? ''}`, children: _jsx(SelectValue, { placeholder: "Export Data" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: _jsx("span", { className: "text-muted-foreground", children: "Export Data As" }) }, "reset"), exportOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))), extraOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] }, "export-dropdown"), popoverOpened && (_jsxs("div", { ref: popoverRef, className: "mt-2 bg-background rounded-md shadow-lg p-4 z-50 absolute w-45", children: [_jsx("div", { className: "text-sm text-muted-foreground pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-muted rounded-md", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: "export-all-data", checked: exportAllData, onChange: (event) => setExportAllData(event.currentTarget.checked), className: "checked:!bg-primary checked:!border-primary" }), _jsx(Label, { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-1 ml-6", children: "This will fetch all records for the table" })] }), _jsx(Stack, { children: columns.map((col) => {
+    return (_jsxs("div", { className: `w-40 ${containerClassName ?? ''}`, children: [_jsxs(Select, { value: exportType ?? 'none', open: selectOpen, onOpenChange: setSelectOpen, onValueChange: (value) => handleExportChange(value === 'none' ? null : value), children: [_jsx(SelectTrigger, { className: `w-full ${buttonClassName ?? ''}`, children: _jsx(SelectValue, { placeholder: "Export Data" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: _jsx("span", { className: "text-muted-foreground", children: "Export Data As" }) }, "reset"), exportOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))), extraOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] }, "export-dropdown"), popoverOpened && (_jsxs("div", { ref: popoverRef, className: "mt-2 bg-background rounded-md shadow-lg p-4 z-50 absolute w-45", children: [_jsx("div", { className: "text-sm text-muted-foreground pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-muted rounded-md", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: "export-all-data", checked: exportAllData, onChange: (event) => setExportAllData(event.currentTarget.checked), className: "checked:!bg-primary checked:!border-primary" }), _jsx(Label, { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-1 ml-6", children: shouldQueueAsync
+                                    ? 'This dataset is large — it will be prepared in the background and appear in export history.'
+                                    : 'This will fetch all records for the table' })] }), _jsx(Stack, { children: columns.map((col) => {
                             if (col.accessorKey !== 'action') {
                                 return (_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: col.header, checked: !excludedColumns.includes(col.accessorKey), onChange: (event) => handleCheckboxChange(col.accessorKey, !event.currentTarget.checked), className: "checked:!bg-primary checked:!border-primary" }), _jsx(Label, { htmlFor: "rememberMe", children: col.header })] }, col.accessorKey));
                             }
                         }) }), _jsx(Button, { variant: "primary", 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 hover:bg-primary/90'}`, 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" }), _jsx("span", { children: "Send Export via Email" })] }), size: "md", primaryButton: {
+                            : 'bg-primary hover:bg-primary/90'}`, 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" })] }), exportProgress && exportProgress.total > exportProgress.fetched
+                                    ? `Fetching ${exportProgress.fetched}/${exportProgress.total}...`
+                                    : 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" }), _jsx("span", { children: "Send Export via Email" })] }), size: "md", primaryButton: {
                     label: 'Send Email',
                     onClick: () => {
                         handleEmailModalSubmit().catch((error) => {

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

@@ -97,7 +97,7 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
             else {
                 handleFilter(name, value);
             }
-        }, handleApplyFilters: onApply, resetFilters: onClearFilters ?? (() => { }), showSearch: searchEnabled, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [exportConfig?.enabled && (_jsx(ExportDropdown, { containerClassName: isNarrow ? 'w-full' : undefined, columns: columns, data: data, buttonClassName: "h-10", extraOptions: exportConfig.extraOptions, pdfOptions: exportConfig.pdf, xlsxOptions: exportConfig.xlsx, csvOptions: exportConfig.csv, exportAll: !!exportConfig.fetchAllData, fetchData: exportConfig.fetchAllData, enableEmailExport: !!exportConfig.email, emailExportApiUrl: exportConfig.email?.apiUrl, onEmailExportSuccess: exportConfig.email?.onSuccess, onEmailExportError: exportConfig.email?.onError })), addButton &&
+        }, handleApplyFilters: onApply, resetFilters: onClearFilters ?? (() => { }), showSearch: searchEnabled, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [exportConfig?.enabled && (_jsx(ExportDropdown, { containerClassName: isNarrow ? 'w-full' : undefined, columns: columns, data: data, buttonClassName: "h-10", extraOptions: exportConfig.extraOptions, pdfOptions: exportConfig.pdf, xlsxOptions: exportConfig.xlsx, csvOptions: exportConfig.csv, exportAll: !!exportConfig.fetchAllData, fetchData: exportConfig.fetchAllData, asyncExport: exportConfig.asyncExport, enableEmailExport: !!exportConfig.email, emailExportApiUrl: exportConfig.email?.apiUrl, onEmailExportSuccess: exportConfig.email?.onSuccess, onEmailExportError: exportConfig.email?.onError })), addButton &&
                     (typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd ?? (() => { }), icon: HiPlusSm, label: "add-new-entry", className: cn('items-center text-nowrap', isNarrow ? 'w-full' : undefined), children: addText ?? 'Add New Entry' })) : (addButton))] }) }));
 }
 // ─── PagamioTable Component ──────────────────────────────────────────

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

@@ -82,12 +82,42 @@ export interface ExportConfig<T extends Record<string, any>> {
     xlsx?: XlsxExportOptions;
     csv?: CsvExportOptions;
     extraOptions?: ExtraOption[];
-    fetchAllData?: (params?: Record<string, string>) => Promise<T[]>;
+    /**
+     * Fetch the full dataset for "Export all data" (not just the current page).
+     * `onProgress(fetched, total)` is invoked after each page so the UI can show
+     * progress on long, multi-request exports. `usePagamioTable` auto-wires this
+     * for server-paginated tables; a consumer may override (e.g. a dedicated
+     * export endpoint).
+     */
+    fetchAllData?: (params?: Record<string, string>, onProgress?: (fetched: number, total: number) => void) => Promise<T[]>;
     email?: {
         apiUrl: string;
         onSuccess?: (message: string) => void;
         onError?: (error: Error) => void;
     };
+    /**
+     * Async (queued) export for datasets too large to page through and render in
+     * the browser. When "Export all data" is checked and `totalRows > threshold`,
+     * the export button calls `requestExport(format)` instead of fetching the
+     * whole set client-side — the backend generates the file off the request path
+     * and delivers it via export history / email.
+     *
+     * `usePagamioTable` auto-wires `totalRows` from the table's row count; the
+     * consumer supplies `threshold` and `requestExport` (which POSTs to
+     * `/exports` with its `resourceKey` + current filters).
+     */
+    asyncExport?: {
+        /** Row count above which export is queued instead of run client-side. */
+        threshold: number;
+        /** Current total server rows (auto-wired by the hook). */
+        totalRows: number;
+        /** Queue a server-side export of the full dataset in the chosen format. */
+        requestExport: (format: 'csv' | 'xlsx' | 'pdf') => Promise<void>;
+        /** Called after a successful queue request (e.g. to toast the user). */
+        onQueued?: (message: string) => void;
+        /** Called if the queue request fails. */
+        onError?: (error: Error) => void;
+    };
 }
 export interface ToolbarConfig<T extends Record<string, any>> {
     filters?: BaseFilter[];

package/lib/shared/hooks/usePagamioTable.js

@@ -274,9 +274,10 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
     // Pages through the same `queryFn` at the backend's max `limit`, preserving
     // the user's current sort/filters/search so the export matches what they see.
     // Returns the full flattened dataset for the client-side export utils.
-    const fetchAllPages = useCallback(async () => {
+    const fetchAllPages = useCallback(async (_params, onProgress) => {
         if (!isServerMode || !queryFn) {
             // Client-mode tables already hold the whole filtered/sorted set.
+            onProgress?.(processedData.length, processedData.length);
             return processedData;
         }
         const buildPageParams = (page) => buildQueryParams(queryParamConfig, { mode: paginationConfig.mode, page, size: MAX_EXPORT_PAGE_SIZE }, { mode: sortingConfig.mode, sortConfig }, { mode: filteringConfig.mode, searchMode, filters: appliedFilters });
@@ -288,6 +289,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         const all = [...first.data];
         const total = first.total || serverTotal;
         const totalPages = Math.max(1, Math.ceil(total / MAX_EXPORT_PAGE_SIZE));
+        onProgress?.(all.length, total);
         // Pages are zero/one-based per the consumer's `queryParamConfig.transform`;
         // `buildQueryParams` already applies that transform, so we just feed it the
         // hook's internal zero-based index and let the config bump it.
@@ -297,6 +299,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
             if (pageData.length === 0)
                 break; // defensive: stop if a page comes back empty
             all.push(...pageData);
+            onProgress?.(all.length, total);
         }
         return all;
     }, [
@@ -366,6 +369,14 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
                     export: {
                         ...toolbar.export,
                         fetchAllData: toolbar.export.fetchAllData ?? fetchAllPages,
+                        // Keep the async-export row count in sync with the live total so
+                        // the consumer only has to supply `threshold` + `requestExport`.
+                        ...(toolbar.export.asyncExport && {
+                            asyncExport: {
+                                ...toolbar.export.asyncExport,
+                                totalRows: totalItems,
+                            },
+                        }),
                     },
                 }),
             },

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