@pagamio/frontend-commons-lib 0.8.207 → 0.8.209

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