@pagamio/frontend-commons-lib 0.8.208 → 0.8.210

package/lib/api/client.js

@@ -322,7 +322,8 @@ export class ApiClient {
             data = response;
         }
         if (this.config.onResponse) {
-            data = await this.config.onResponse(response, data);
+            const transformedData = await this.config.onResponse(response, data);
+            data = transformedData;
         }
         return data;
     }

package/lib/dashboard-visuals/hooks/useChartData.js

@@ -48,6 +48,9 @@ export const useChartData = (url, query, transform) => {
             lastDataRef.current = data;
             lastFetchTimeRef.current = Date.now();
         },
+        onError: (error) => {
+            console.error('[useChartData] Error fetching data', { url, query, error });
+        },
     });
     // Effect to update last fetch time when data changes
     useEffect(() => {
@@ -55,7 +58,7 @@ export const useChartData = (url, query, transform) => {
             lastDataRef.current = data;
             lastFetchTimeRef.current = Date.now();
         }
-    }, [data]);
+    }, [data, url]);
     const transformedData = transform ? transform(data) : data;
     const isEmpty = !error && !loading && Array.isArray(transformedData) ? !transformedData.length : transformedData === undefined;
     // Enhanced refresh function that uses intelligent caching without custom headers

package/lib/dashboard-visuals/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FilterConfig } from './components/types';
+import { type DashboardApiPaths } from './utils';
 type FilterValue = string | string[] | Date | null | undefined;
 interface Config {
     title: string;
@@ -33,6 +34,8 @@ interface DashboardWrapperProps {
     resetFilters?: () => void;
     handleApplyFilters?: () => void;
     handleApplyTourFilters?: () => void;
+    /** Custom API paths for different domains*/
+    apiPaths?: DashboardApiPaths;
 }
 declare const DashboardWrapper: React.FC<DashboardWrapperProps>;
 export default DashboardWrapper;

package/lib/dashboard-visuals/index.js

@@ -7,7 +7,7 @@ import { FilterComponent, Tab } from '../components';
 import { useMediaQueries } from '../shared';
 import ErrorState from './components/ErrorState';
 import FilterComponentSkeleton from './components/FilterComponentSkeleton';
-import { DashboardPaths, getFilterOptionsData, getGridColProps } from './utils';
+import { defaultDashboardApiPaths, getFilterOptionsData, getGridColProps } from './utils';
 import componentRegistry from './visualRegistry';
 const OverviewContent = ({ visualData, renderContent, renderVisual }) => {
     return (_jsxs(_Fragment, { children: [renderContent(), _jsx("main", { children: visualData.map((section) => (_jsxs("div", { className: "mb-2", children: [section.sectionTitle && _jsx("h2", { className: "mb-2 text-1xl font-semibold", children: section.sectionTitle }), _jsx(Grid, { gutter: "md", align: "stretch", className: "mb-[6px]", children: section.data.map((visual) => {
@@ -51,7 +51,7 @@ const renderFilterComponent = ({ isLoading, error, filters, filterOptions, selec
             rangeKeys: filter.rangeKeys,
         })), showClearFilters: true, selectedFilters: selectedFilters, handleFilterChange: handleFilterChange, handleApplyFilters: handleApplyFilters, resetFilters: resetFilters, isNarrow: isNarrow }));
 };
-const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayout = false, handleFilterChange = () => { }, selectedFilters = {}, tourSelectedFilters = {}, resetFilters = () => { }, handleApplyFilters = () => { }, handleApplyTourFilters = () => { }, handleTourFilterChange = () => { }, }) => {
+const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayout = false, handleFilterChange = () => { }, selectedFilters = {}, tourSelectedFilters = {}, resetFilters = () => { }, handleApplyFilters = () => { }, handleApplyTourFilters = () => { }, handleTourFilterChange = () => { }, apiPaths = defaultDashboardApiPaths, }) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [tourError, setTourError] = useState(null);
@@ -99,7 +99,9 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
         const fetchFilters = (filters, isTour = false) => {
             filters.forEach((filter) => {
                 if (filter.query) {
-                    const queryUrl = isTour ? (filter.tourUrl ?? DashboardPaths.QUERY) : (filter.url ?? DashboardPaths.QUERY);
+                    // Use custom apiPaths.query if filter doesn't have its own url
+                    const defaultQueryUrl = apiPaths.query;
+                    const queryUrl = isTour ? (filter.tourUrl ?? defaultQueryUrl) : (filter.url ?? defaultQueryUrl);
                     fetchFilterData(filter.name, filter.valueKey, queryUrl, filter.query, isTour);
                 }
             });
@@ -108,7 +110,7 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
         if (config.tourFilters) {
             fetchFilters(config.tourFilters, true);
         }
-    }, [config.filters, isRefreshOpttonsQuery]);
+    }, [config.filters, isRefreshOpttonsQuery, apiPaths]);
     const handleRetry = () => {
         setIsRefreshOpttonsQuery((prev) => prev + 1);
     };
@@ -167,6 +169,11 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
             console.error(`Visual type "${metricData.type}" not recognized in section "${sectionTitle}" at visual index ${index}.`);
             return null;
         }
+        // Determine URL based on component type and custom apiPaths
+        // If metricData already has a custom url, use it; otherwise use apiPaths
+        const isTileType = metricData.type === 'Tile' || metricData.type === 'MetricSummaryCard';
+        const defaultUrl = isTileType ? apiPaths.metrics : apiPaths.query;
+        const url = metricData.url || defaultUrl;
         const props = {
             data: metricData.data,
             options: metricData.options,
@@ -179,9 +186,10 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
             themeColor: config.themeColor,
             currencyDisplaySymbol: metricData.currencyDisplaySymbol,
             ...metricData,
+            url, // Override url with apiPaths or metricData.url
         };
         return (_jsx(Grid.Col, { span: matchesSmall ? 12 : span, offset: offset, children: _jsx(VisualComponent, { ...props }) }, `visual-${sectionTitle}-${visual.id}`));
-    }, [config.themeColor, isXs, isSm]);
+    }, [config.themeColor, isXs, isSm, apiPaths]);
     const tabs = [
         {
             id: 1,

package/lib/dashboard-visuals/utils/api.d.ts

@@ -3,3 +3,9 @@ export declare enum DashboardPaths {
     QUERY = "/dashboard/query",
     METRICS = "/dashboard/metrics"
 }
+export interface DashboardApiPaths {
+    query: string;
+    metrics: string;
+    paged?: string;
+}
+export declare const defaultDashboardApiPaths: DashboardApiPaths;

package/lib/dashboard-visuals/utils/api.js

@@ -4,3 +4,9 @@ export var DashboardPaths;
     DashboardPaths["QUERY"] = "/dashboard/query";
     DashboardPaths["METRICS"] = "/dashboard/metrics";
 })(DashboardPaths || (DashboardPaths = {}));
+// Default paths matching the enum
+export const defaultDashboardApiPaths = {
+    query: DashboardPaths.QUERY,
+    metrics: DashboardPaths.METRICS,
+    paged: DashboardPaths.PAGED,
+};

package/lib/dashboard-visuals/visuals/Tile.js

@@ -6,9 +6,23 @@ import { useChartData } from '../hooks/useChartData';
 import { DashboardPaths, formatValue } from '../utils';
 const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
     const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
-    // Safe default values
-    const value = data?.[valueKey] ?? 0;
-    const currency = propCurrency || data?.additionalData?.currency || undefined;
+    // Safe default values - handle both flat and nested data structures
+    let value = 0;
+    if (data) {
+        // Check if data is an array (events analytics format)
+        if (Array.isArray(data)) {
+            // Aggregate values across all items
+            value = data.reduce((sum, item) => {
+                const itemValue = Number(item[valueKey]) || 0;
+                return sum + itemValue;
+            }, 0);
+        }
+        else {
+            // Direct access for flat structure
+            value = data[valueKey] ?? 0;
+        }
+    }
+    const currency = propCurrency || (!Array.isArray(data) ? data?.additionalData?.currency : undefined) || undefined;
     return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading && !data, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "flex justify-between", style: { height: '50px' }, children: _jsx("div", { className: "text-xl font-400", children: currency
                         ? formatPrice(Number(value.toFixed(2)), currency, 2, undefined, currencyDisplaySymbol)
                         : formatValue(Number(value.toFixed(2)), 'number') }) }) }) }));

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

@@ -4,7 +4,7 @@ import { Checkbox, Label, TextInput } from 'flowbite-react';
 import { HiMail } from 'react-icons/hi';
 import { useEffect, useRef, useState } from 'react';
 import { Modal, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
-import { exportToCsv, exportToPdf, exportToXlsx, generateExportAsBase64, sendExportEmail } from './exportUtils';
+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 [exportType, setExportType] = useState(null);
     const [excludedColumns, setExcludedColumns] = useState(['action']);
@@ -78,27 +78,18 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
         }
     };
     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);
+            const exportFile = await generateExportAsFile(pendingExportData.data, pendingExportData.columns, pendingEmailFormat, { pdfOptions, xlsxOptions, csvOptions });
+            const result = await sendExportEmail(emailAddress, exportFile, emailExportApiUrl);
             onEmailExportSuccess?.(result || 'Export sent successfully to your email');
             setEmailAddress('');
             setShowEmailModal(false);

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

@@ -40,18 +40,20 @@ export declare const exportToCsv: <T extends Record<string, any>>(data: T[], col
 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
+ * Sends an export file to the user via email using multipart/form-data
+ * Automatically includes Authorization header from cookies if available
  * @param email - The recipient email address
- * @param file - Base64 encoded file string
+ * @param file - The File object to send
  * @param baseUrl - The API base URL (optional, defaults to /api/v1)
+ * @param additionalHeaders - Optional additional headers to merge with auth headers
  */
-export declare const sendExportEmail: (email: string, file: string, baseUrl?: string) => Promise<string>;
+export declare const sendExportEmail: (email: string, file: File, baseUrl?: string, additionalHeaders?: HeadersInit) => Promise<string>;
 /**
- * Generates export file as base64 string for email sending
+ * Generates export as a File object for email sending
  */
-export declare const generateExportAsBase64: <T extends Record<string, any>>(data: T[], columns: MRT_ColumnDef<T>[], format: "csv" | "xlsx" | "pdf", options?: {
+export declare const generateExportAsFile: <T extends Record<string, any>>(data: T[], columns: MRT_ColumnDef<T>[], format: "csv" | "xlsx" | "pdf", options?: {
     pdfOptions?: PdfExportOptions;
     xlsxOptions?: XlsxExportOptions;
     csvOptions?: CsvExportOptions;
-}) => Promise<string>;
+}) => Promise<File>;
 export {};

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

@@ -781,28 +781,55 @@ export const exportToPdf = async (data, columns, options = {}) => {
     doc.save(filename);
 };
 /**
- * Sends an export file to the user via email
+ * Helper to get authentication headers from browser cookies
+ * This reads the accessToken cookie that's set by TokenManager
+ */
+const getAuthHeaders = () => {
+    if (typeof document === 'undefined')
+        return {};
+    // Read accessToken from cookies (matches TokenManager cookie name)
+    const cookies = document.cookie.split(';');
+    const accessTokenCookie = cookies.find((cookie) => cookie.trim().startsWith('accessToken='));
+    if (!accessTokenCookie)
+        return {};
+    const token = accessTokenCookie.split('=')[1];
+    return {
+        Authorization: `Bearer ${token}`,
+    };
+};
+/**
+ * Sends an export file to the user via email using multipart/form-data
+ * Automatically includes Authorization header from cookies if available
  * @param email - The recipient email address
- * @param file - Base64 encoded file string
+ * @param file - The File object to send
  * @param baseUrl - The API base URL (optional, defaults to /api/v1)
+ * @param additionalHeaders - Optional additional headers to merge with auth headers
  */
-export const sendExportEmail = async (email, file, baseUrl = '/api/v1') => {
+export const sendExportEmail = async (email, file, baseUrl = '/api/v1', additionalHeaders) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    // Build headers: start with auth, then merge additional headers if provided
+    const authHeaders = getAuthHeaders();
+    const headers = additionalHeaders ? { ...authHeaders, ...additionalHeaders } : authHeaders;
+    // Note: Do NOT set Content-Type here - browser will set it automatically with boundary for multipart/form-data
     const response = await fetch(`${baseUrl}/exports/send-email?email=${encodeURIComponent(email)}`, {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ file }),
+        headers,
+        body: formData,
     });
     if (!response.ok) {
-        throw new Error(`Failed to send email: ${response.statusText}`);
+        const errorText = await response.text().catch(() => response.statusText);
+        throw new Error(`Failed to send email: ${errorText}`);
     }
     return response.text();
 };
 /**
- * Generates export file as base64 string for email sending
+ * Generates export as a File object for email sending
  */
-export const generateExportAsBase64 = async (data, columns, format, options) => {
+export const generateExportAsFile = async (data, columns, format, options) => {
+    const timestamp = new Date().toISOString().split('T')[0];
+    const title = options?.pdfOptions?.title || options?.xlsxOptions?.title || 'export';
+    const baseFilename = `${title.toLowerCase().replaceAll(/\s+/g, '_')}_${timestamp}`;
     if (format === 'csv') {
         const visibleColumns = columns.filter((col) => col.accessorKey !== 'action');
         const headers = visibleColumns.map((col) => String(col.header ?? col.accessorKey));
@@ -812,7 +839,8 @@ export const generateExportAsBase64 = async (data, columns, format, options) =>
             return value !== null && value !== undefined ? String(value) : '';
         }));
         const csvContent = Papa.unparse({ fields: headers, data: rows });
-        return btoa(csvContent);
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        return new File([blob], `${baseFilename}.csv`, { type: 'text/csv' });
     }
     if (format === 'xlsx') {
         const visibleColumns = columns.filter((col) => col.accessorKey !== 'action');
@@ -824,8 +852,13 @@ export const generateExportAsBase64 = async (data, columns, format, options) =>
         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;
+        const xlsxBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+        const blob = new Blob([xlsxBuffer], {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        });
+        return new File([blob], `${baseFilename}.xlsx`, {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        });
     }
     if (format === 'pdf') {
         const doc = new jsPDF();
@@ -841,7 +874,8 @@ export const generateExportAsBase64 = async (data, columns, format, options) =>
             body: rows,
             startY: 20,
         });
-        return doc.output('datauristring').split(',')[1];
+        const pdfBlob = doc.output('blob');
+        return new File([pdfBlob], `${baseFilename}.pdf`, { type: 'application/pdf' });
     }
     throw new Error(`Unsupported format: ${format}`);
 };

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

@@ -1,5 +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 { sendExportEmail, generateExportAsFile } from './data-table/exportUtils';
 export * from './utils';

package/lib/pagamio-table/index.js

@@ -1,5 +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 { sendExportEmail, generateExportAsFile } from './data-table/exportUtils';
 export * from './utils';

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