@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

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

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MantineReactTable, } from 'mantine-react-table';
+import { useMemo, useState } from 'react';
+import LoaderComponent from '../../components/ui/Loader';
+const CoreTable = ({ columns, isLoading = false, data, sortable = false, sortConfig = null, onSort = () => { }, selectable = false, selectedRows = [], onSelectRow = () => { }, onSelectAll = () => { }, enablePagination = false, expandable = false, renderExpandableComponent, pagination, enableGlobalFilters, enableManualSorting, enableManualPagination, multiSorting, setSortBy, setSortDir, onRowClick, rowClassName, ...props }) => {
+    const [expanded, setExpanded] = useState({});
+    const hideHeaderConfig = (column) => {
+        return {
+            ...column,
+            header: '',
+            enableSorting: false,
+            enableColumnFilter: false,
+            enableColumnActions: false,
+            mantineTableHeadCellProps: {
+                sx: {
+                    svg: {
+                        display: 'none',
+                    },
+                },
+            },
+        };
+    };
+    const memoizedColumns = useMemo(() => {
+        return columns.map((column) => {
+            const { showHeader = true, ...rest } = column;
+            if (showHeader) {
+                return {
+                    ...rest,
+                    enableSorting: sortable && !!onSort,
+                };
+            }
+            return hideHeaderConfig(column);
+        });
+    }, [columns, sortable, onSort]);
+    const memoizedData = useMemo(() => data, [data]);
+    const sortingState = useMemo(() => {
+        if (!sortConfig?.sortBy || !sortConfig?.sortDir)
+            return [];
+        return [{ id: sortConfig.sortBy, desc: sortConfig.sortDir === 'desc' }];
+    }, [sortConfig]);
+    const handleSortingChange = (updaterOrValue) => {
+        const newSorting = typeof updaterOrValue === 'function' ? updaterOrValue([]) : updaterOrValue;
+        if (!Array.isArray(newSorting) || newSorting.length === 0) {
+            return;
+        }
+        const [sort] = newSorting;
+        const sortKey = sort.id;
+        const sortDirection = sort.desc ? 'desc' : 'asc';
+        // Check if the sort config has actually changed before updating state
+        if (sortConfig?.sortBy !== sortKey || sortConfig?.sortDir !== sortDirection) {
+            setSortBy?.(sortKey);
+            setSortDir?.(sortDirection);
+            onSort?.(sortKey, sortDirection);
+        }
+    };
+    const handlePaginationChangeInternal = (updaterOrValue) => {
+        let newPagination;
+        if (typeof updaterOrValue === 'function') {
+            newPagination = updaterOrValue(pagination
+                ? {
+                    pageIndex: pagination.pageIndex,
+                    pageSize: pagination.pageSize,
+                }
+                : { pageIndex: 0, pageSize: 10 });
+        }
+        else {
+            newPagination = updaterOrValue;
+        }
+        // Trigger the onPaginationChange callback to update server-side state
+        pagination?.onPaginationChange?.(newPagination.pageIndex, newPagination.pageSize);
+        // Optionally trigger the onPageChange callback if needed
+        pagination?.onPageChange?.(newPagination.pageIndex);
+        // Reset expanded rows when pagination changes
+        setExpanded({});
+    };
+    // Handle row click for Mantine React Table
+    const handleRowClick = (row, event) => {
+        // Prevent row click when clicking on buttons/links within the row
+        const target = event.target;
+        if (target.tagName === 'BUTTON' ||
+            target.tagName === 'A' ||
+            target.closest('button') ||
+            target.closest('a') ||
+            target.closest('[data-mantine-stop-propagation]') ||
+            target.closest('.mantine-ActionIcon-root')) {
+            return;
+        }
+        if (onRowClick) {
+            onRowClick(row.original);
+        }
+    };
+    return (_jsx(MantineReactTable, { columns: memoizedColumns, data: memoizedData, enableSorting: true, manualSorting: true, onSortingChange: handleSortingChange, enableRowSelection: selectable, enableGlobalFilter: enableGlobalFilters, onRowSelectionChange: (rowSelection) => { }, enableSelectAll: selectable, manualPagination: enableManualPagination, enablePagination: enablePagination, initialState: {
+            pagination: {
+                pageIndex: pagination?.pageIndex ?? 0,
+                pageSize: pagination?.pageSize ?? 10,
+            },
+            sorting: [],
+        }, state: {
+            isLoading: isLoading,
+            pagination: {
+                pageIndex: pagination?.pageIndex ?? 0,
+                pageSize: pagination?.pageSize ?? 10,
+            },
+            sorting: sortingState,
+            expanded,
+        }, onPaginationChange: handlePaginationChangeInternal, renderEmptyRowsFallback: () => (_jsxs("div", { style: { textAlign: 'center', padding: '20px', color: '#888' }, children: [_jsx("p", { children: "No data available" }), _jsx("p", { children: "Please adjust your filters or try again later." })] })), mantineTableContainerProps: {
+            sx: {
+                border: 'transparent',
+                borderRadius: '4px',
+                minHeight: '400px',
+            },
+        }, mantineLoadingOverlayProps: {
+            loader: _jsx(LoaderComponent, { size: "lg" }),
+            overlayColor: 'rgba(255, 255, 255, 0.8)',
+            overlayBlur: 2,
+        }, onExpandedChange: setExpanded, enableExpanding: expandable, renderDetailPanel: renderExpandableComponent, mantineTableBodyRowProps: ({ row }) => ({
+            onClick: (event) => handleRowClick(row, event),
+            sx: {
+                cursor: onRowClick ? 'pointer' : 'default',
+                '&:hover': onRowClick
+                    ? {
+                        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                    }
+                    : {},
+            },
+            className: rowClassName,
+        }), ...props }));
+};
+export default CoreTable;

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

@@ -0,0 +1,10 @@
+type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    itemsPerPage: number;
+    itemsPerPageOptions: number[];
+    onItemsPerPageChange: (itemsPerPage: number) => void;
+};
+declare const Pagination: ({ currentPage, totalPages, onPageChange, itemsPerPage, itemsPerPageOptions, onItemsPerPageChange, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Pagination = ({ currentPage, totalPages, onPageChange, itemsPerPage, itemsPerPageOptions, onItemsPerPageChange, }) => {
+    return (_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-gray-200 sm:px-6", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: "text-sm text-gray-700", children: "Rows per page:" }), _jsx("select", { value: itemsPerPage, onChange: (e) => onItemsPerPageChange(Number(e.target.value)), className: "block w-20 pl-3 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md", children: itemsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700", children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "px-3 py-1 text-sm font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed", children: "Next" })] })] }));
+};
+export default Pagination;

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

@@ -0,0 +1,8 @@
+import { type MRT_ColumnDef } from 'mantine-react-table';
+import React from 'react';
+interface TableDownloadProps<T extends Record<string, any>> {
+    columns: MRT_ColumnDef<T>[];
+    data: T[];
+}
+declare const TableDownload: React.FC<TableDownloadProps<any>>;
+export default TableDownload;

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from 'flowbite-react';
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
+import { FiDownload } from 'react-icons/fi';
+import * as XLSX from 'xlsx';
+const TableDownload = ({ columns, data }) => {
+    const handleDownload = (format) => {
+        if (data.length === 0) {
+            console.warn('No data available for download');
+            return;
+        }
+        switch (format) {
+            case 'csv':
+                downloadCSV(columns, data);
+                break;
+            case 'excel':
+                downloadExcel(columns, data);
+                break;
+            case 'pdf':
+                downloadPDF(columns, data);
+                break;
+            default:
+                console.warn('Unsupported format');
+        }
+    };
+    // CSV Export
+    const downloadCSV = (columns, data) => {
+        const columnKeys = columns.map((col) => col.accessor);
+        const headers = columns.map((col) => col.header);
+        const csvContent = 'data:text/csv;charset=utf-8,' +
+            [
+                headers.join(','),
+                ...data.map((row) => columnKeys.map((key) => `"${String(row[key])}"`).join(',')),
+            ].join('\n');
+        const encodedUri = encodeURI(csvContent);
+        const link = document.createElement('a');
+        link.setAttribute('href', encodedUri);
+        link.setAttribute('download', 'table_data.csv');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    // Excel Export
+    const downloadExcel = (columns, data) => {
+        const columnKeys = columns.map((col) => col.accessor);
+        const formattedData = data.map((row) => columnKeys.reduce((acc, key) => {
+            acc[key] = row[key];
+            return acc;
+        }, {}));
+        const worksheet = XLSX.utils.json_to_sheet(formattedData);
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, 'Table Data');
+        XLSX.writeFile(workbook, 'table_data.xlsx');
+    };
+    // PDF Export
+    const downloadPDF = (columns, data) => {
+        const doc = new jsPDF();
+        doc.text('Table Data Report', 20, 10);
+        const headers = columns.map((col) => col.header);
+        autoTable(doc, {
+            head: [headers],
+            body: data,
+            styles: {
+                fillColor: [255, 255, 255],
+                textColor: [0, 0, 0],
+                overflow: 'linebreak',
+            },
+            headStyles: {
+                fillColor: [255, 255, 255],
+                textColor: [0, 0, 0],
+            },
+            bodyStyles: {
+                valign: 'top',
+            },
+        });
+        doc.save('table_data.pdf');
+    };
+    return (_jsxs(Dropdown, { color: "light", label: _jsxs("div", { className: "inline-flex items-center text-primary-500", children: [_jsx(FiDownload, { className: "h-5 w-5 mr-2", "aria-hidden": "true" }), "Download Report"] }), children: [_jsx(Dropdown.Item, { onClick: () => handleDownload('csv'), children: "CSV" }), _jsx(Dropdown.Item, { onClick: () => handleDownload('excel'), children: "Excel" }), _jsx(Dropdown.Item, { onClick: () => handleDownload('pdf'), children: "PDF" })] }));
+};
+export default TableDownload;

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

@@ -0,0 +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;
+export default TableToolbar;

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

@@ -0,0 +1,16 @@
+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 handleFilter = (columnKey, value) => {
+        onTableFilter(columnKey, value ?? '');
+    };
+    return (_jsx(FilterComponent, { filters: filters.map((filterObj) => ({
+            name: filterObj.columnKey,
+            type: 'select',
+            options: filterObj.options,
+            placeholder: filterObj.placeholder,
+        })), searctInputPlaceHolder: searctInputPlaceHolder, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, selectedFilters: appliedFilters, handleFilterChange: (name, value) => 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) }))] }) }));
+};
+export default TableToolbar;

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

@@ -0,0 +1,42 @@
+import 'jspdf-autotable';
+import { type MRT_ColumnDef } from 'mantine-react-table';
+interface ThemeColors {
+    primary: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    core: {
+        primary: string;
+        secondary: string;
+    };
+}
+interface PdfExportOptions {
+    title?: string;
+    subtitle?: string;
+    colors?: ThemeColors;
+    logo?: {
+        url: string;
+        width?: number;
+        height?: number;
+    };
+}
+interface XlsxExportOptions {
+    title?: string;
+    subtitle?: string;
+    colors?: ThemeColors;
+    sheetName?: string;
+    includeTimestamp?: boolean;
+    autoFitColumns?: boolean;
+}
+interface CsvExportOptions {
+    title?: string;
+    includeTimestamp?: boolean;
+    includeHeaders?: boolean;
+    delimiter?: string;
+    filename?: string;
+}
+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>;
+export {};