tp-react-elements 1.3.1 → 1.3.2

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var Month = {};
 
-export { DateInput as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DateInput = {};
 
-export { Month as __exports };
+export { DateInput as __exports };

package/dist/components/PaginatedGrid/DynamicFilterBar.d.ts

@@ -0,0 +1,59 @@
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+import type { MRT_ColumnFiltersState } from 'material-react-table';
+/**
+ * Describes one server-side filter chip.
+ *
+ * - `dateRange` — two-date popover. `fromKey` / `toKey` map to `filterValues`.
+ * - `text`      — single text-input popover. `filterKey` maps to `filterValues`.
+ * - `dropdown`  — single-select popover with a fixed list of `options`.
+ *                 `filterKey` maps to `filterValues`.
+ * - `date`      — single date-picker chip. Applied client-side via MRT `columnFilters`.
+ */
+export type ServerFilterDef = {
+    type: 'dateRange';
+    id: string;
+    label: string;
+    fromKey: string;
+    toKey: string;
+} | {
+    type: 'text';
+    id: string;
+    label: string;
+    filterKey: string;
+    placeholder?: string;
+} | {
+    type: 'dropdown';
+    id: string;
+    label: string;
+    filterKey: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+} | {
+    /**
+     * Single-date picker chip — applied client-side against the MRT column
+     * whose `accessorKey` matches `columnKey`.
+     */
+    type: 'date';
+    id: string;
+    label: string;
+    columnKey: string;
+};
+interface AvailableColumn {
+    id: string;
+    label: string;
+}
+export interface DynamicFilterBarProps {
+    serverFilterDefs: ServerFilterDef[];
+    visibleFilterIds: string[];
+    onToggleFilter: (id: string) => void;
+    filterValues: Record<string, string>;
+    onFilterValuesChange: (values: Record<string, string>) => void;
+    columnFilters: MRT_ColumnFiltersState;
+    onColumnFilterChange: (f: MRT_ColumnFiltersState) => void;
+    availableColumns: AvailableColumn[];
+}
+declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
+export default DynamicFilterBar;

package/dist/components/PaginatedGrid/DynamicFilterBar.esm.js

@@ -0,0 +1,269 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { d as distExports } from '../../_virtual/index.esm.js';
+import DatepickerWrapperV2 from '../FormComponents/DatePicker/DatepickerWrapperV2.esm.js';
+import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
+import { Box, Typography, Button, Popover, TextField, Stack, Tooltip, List, ListItemButton, ListItemText, Divider } from '@mui/material';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import TuneIcon from '@mui/icons-material/Tune';
+import CloseIcon from '@mui/icons-material/Close';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import CheckIcon from '@mui/icons-material/Check';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+// Enable strict-format parsing so dayjs can handle the DD/MM/YYYY strings
+// that DatepickerWrapperV2 passes to onChangeFn
+dayjs.extend(customParseFormat);
+// ─── Type pill metadata ───────────────────────────────────────────────────────
+const TYPE_PILL = {
+    dateRange: { label: 'Range', color: '#1565c0', bg: '#e3f2fd' },
+    date: { label: 'Date', color: '#00695c', bg: '#e0f2f1' },
+    text: { label: 'Text', color: '#2e7d32', bg: '#e8f5e9' },
+    dropdown: { label: 'Select', color: '#6a1b9a', bg: '#f3e5f5' },
+};
+// ─── Chip shared style ────────────────────────────────────────────────────────
+const chipSx = (active) => ({
+    borderRadius: 5,
+    textTransform: 'none',
+    fontSize: 12,
+    fontWeight: active ? 600 : 400,
+    borderColor: active ? 'primary.main' : 'divider',
+    color: active ? 'primary.main' : 'text.secondary',
+    bgcolor: active ? 'rgba(25,118,210,0.08)' : 'transparent',
+    whiteSpace: 'nowrap',
+    px: 1.5,
+    minHeight: 30,
+    '&:hover': { borderColor: 'primary.main', bgcolor: 'rgba(25,118,210,0.08)' },
+});
+// ─── Date helper ──────────────────────────────────────────────────────────────
+const fmtDate = (iso) => {
+    if (!iso)
+        return '';
+    const [y, m, d] = iso.split('-');
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const thisYear = new Date().getFullYear().toString();
+    const yearSuffix = y !== thisYear ? ` '${y.slice(2)}` : '';
+    return `${Number(d)} ${months[Number(m) - 1]}${yearSuffix}`;
+};
+const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove }) => {
+    const [anchor, setAnchor] = useState(null);
+    const active = Boolean(fromDate || toDate);
+    const chipLabel = active ? `${fmtDate(fromDate)} – ${fmtDate(toDate)}` : label;
+    // Convert ISO "YYYY-MM-DD" → Date, using noon to avoid timezone day-shift
+    const isoToDate = (iso) => iso ? new Date(iso + 'T12:00:00') : new Date();
+    // Build the Range array expected by react-date-range
+    const buildRange = () => [{
+            startDate: fromDate ? isoToDate(fromDate) : undefined,
+            endDate: toDate ? isoToDate(toDate) : undefined,
+            key: 'selection',
+        }];
+    const [selRange, setSelRange] = useState(buildRange);
+    // Sync when the parent resets values (e.g. Clear All)
+    useEffect(() => {
+        setSelRange(buildRange());
+    }, [fromDate, toDate]); // eslint-disable-line react-hooks/exhaustive-deps
+    const openPicker = (e) => {
+        setSelRange(buildRange());
+        setAnchor(e.currentTarget);
+    };
+    // Convert a Date to ISO "YYYY-MM-DD" without relying on toISOString (avoids UTC shift)
+    const toISO = (d) => {
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const dd = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${dd}`;
+    };
+    const handleRangeChange = (ranges) => {
+        const sel = ranges.selection;
+        setSelRange([sel]);
+        // Auto-apply & close as soon as a complete range is chosen (start ≠ end day)
+        if (sel.startDate &&
+            sel.endDate &&
+            sel.startDate.getTime() !== sel.endDate.getTime()) {
+            onApply(toISO(sel.startDate), toISO(sel.endDate));
+            setAnchor(null);
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: openPicker, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: chipLabel }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, overflow: 'hidden' } }, children: [jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: selRange, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#1976d2'] }), active && (jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', px: 2, pb: 1.5 }, children: jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply('', ''); setAnchor(null); }, children: "Clear" }) }))] })] }));
+};
+const TextFilterChip = ({ label, value, onApply, onRemove, placeholder }) => {
+    const [anchor, setAnchor] = useState(null);
+    const [draft, setDraft] = useState('');
+    const active = Boolean(value);
+    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: (e) => { setDraft(value); setAnchor(e.currentTarget); }, endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: active ? `${label}: ${value}` : label }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, minWidth: 240 } }, children: jsxs(Box, { sx: { p: 2 }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", fullWidth: true, autoFocus: true, onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    onApply(draft);
+                                    setAnchor(null);
+                                }
+                                if (e.key === 'Escape')
+                                    setAnchor(null);
+                            } }), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", mt: 1.5, children: [active && (jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply(''); setAnchor(null); }, children: "Clear" })), jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: () => { onApply(draft); setAnchor(null); }, children: "Apply" })] })] }) })] }));
+};
+const DatePickerChip = ({ label, value, onApply, onRemove }) => {
+    const [anchor, setAnchor] = useState(null);
+    const active = Boolean(value);
+    const { register, control, getValues, clearErrors, setValue, watch } = useForm({
+        defaultValues: { date: value || null },
+    });
+    // Sync form value whenever the external value prop changes (e.g. on Clear All)
+    useEffect(() => {
+        setValue('date', value || null);
+    }, [value, setValue]);
+    const item = {
+        name: 'date',
+        label,
+        inputType: 'datepicker',
+        onChangeFn: (val) => {
+            // DatepickerWrapperV2 calls onChangeFn with one of:
+            //   • a dayjs-like object (has .format()) — use it directly
+            //   • a "DD/MM/YYYY" formatted string     — parse with strict mode
+            //   • null / undefined                    — clear the filter
+            let iso = '';
+            if (!val) {
+                iso = '';
+            }
+            else if (typeof val.format === 'function') {
+                iso = val.format('YYYY-MM-DD');
+            }
+            else if (typeof val === 'string' && val.trim()) {
+                const parsed = dayjs(val.trim(), 'DD/MM/YYYY', true);
+                iso = parsed.isValid() ? parsed.format('YYYY-MM-DD') : '';
+            }
+            onApply(iso);
+            // Auto-close the popover as soon as a date is picked — no need to click "Done"
+            setAnchor(null);
+        },
+    };
+    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: active ? `${label}: ${fmtDate(value)}` : label }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 2, minWidth: 260 } }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(DatepickerWrapperV2, { props: { item, register, control, errors: {}, getValues, clearErrors, setValue, watch }, variant: "outlined" }), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", mt: 1.5, children: [active && (jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply(''); setValue('date', null); setAnchor(null); }, children: "Clear" })), jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: () => setAnchor(null), children: "Done" })] })] })] }));
+};
+const DropdownFilterChip = ({ label, value, options, onApply, onRemove }) => {
+    const [anchor, setAnchor] = useState(null);
+    const active = Boolean(value);
+    const selectedLabel = options.find((o) => o.value === value)?.label ?? '';
+    const rhf = useForm({ defaultValues: { select: value || '' } });
+    const { register, control, getValues, clearErrors, watch } = rhf;
+    // Sync form value when external value changes (e.g. Clear All)
+    useEffect(() => {
+        rhf.setValue('select', value || '');
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Intercept setValue: SingleSelectNonAutoComplete calls props.setValue(name, val)
+    // on every selection. We forward to react-hook-form AND close the popover with
+    // the chosen value — but only if the popover is currently open (anchor !== null),
+    // to avoid reacting to external syncs from the parent.
+    const interceptedSetValue = (name, val, opts) => {
+        rhf.setValue(name, val, opts);
+        if (anchor !== null) {
+            onApply(val ?? '');
+            setAnchor(null);
+        }
+    };
+    const item = {
+        name: 'select',
+        label,
+        inputType: 'basic-select',
+        options: [
+            { label: 'All', value: '' },
+            ...options.map((o) => ({ label: o.label, value: o.value })),
+        ],
+    };
+    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(ArrowDropDownIcon, { sx: { fontSize: '15px !important', mr: -0.5 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: active ? `${label}: ${selectedLabel}` : label }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 1.5, minWidth: 240 } }, children: jsx(SingleSelectNonAutoComplete, { props: {
+                        item,
+                        register,
+                        control,
+                        errors: {},
+                        getValues,
+                        clearErrors,
+                        setValue: interceptedSetValue,
+                        watch,
+                    }, variant: "outlined" }) })] }));
+};
+const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, }) => {
+    const [anchor, setAnchor] = useState(null);
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Add or remove filter chips", children: jsx(Button, { size: "small", variant: "outlined", startIcon: jsx(TuneIcon, { sx: { fontSize: 14 } }), onClick: (e) => setAnchor(e.currentTarget), sx: {
+                        borderRadius: 5, textTransform: 'none', fontSize: 12,
+                        borderColor: 'divider', color: 'text.secondary',
+                        px: 1.5, minHeight: 30,
+                        '&:hover': { borderColor: 'primary.main', color: 'primary.main' },
+                    }, children: "Manage Filters" }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280 } }, children: jsxs(Box, { sx: { py: 1 }, children: [serverFilterDefs.length > 0 && (jsxs(Fragment, { children: [jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Server Filters" }), jsx(List, { dense: true, disablePadding: true, children: serverFilterDefs.map((def) => {
+                                        const selected = visibleIds.includes(def.id);
+                                        const pill = TYPE_PILL[def.type];
+                                        return (jsxs(ListItemButton, { onClick: () => onToggle(def.id), sx: { px: 2, py: 0.5 }, children: [jsx(Box, { component: "span", sx: {
+                                                        mr: 1.25, flexShrink: 0,
+                                                        fontSize: 10, fontWeight: 700,
+                                                        px: 0.75, py: '2px',
+                                                        borderRadius: '4px',
+                                                        bgcolor: pill.bg,
+                                                        color: pill.color,
+                                                        textTransform: 'uppercase',
+                                                        letterSpacing: 0.4,
+                                                        lineHeight: 1.6,
+                                                    }, children: pill.label }), jsx(ListItemText, { primary: def.label, primaryTypographyProps: {
+                                                        fontSize: 13,
+                                                        color: selected ? 'primary.main' : 'text.primary',
+                                                    } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }, def.id));
+                                    }) })] })), availableColumns.length > 0 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 1 } }), jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Column Filters" }), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 260, overflowY: 'auto' }, children: availableColumns.map((col) => {
+                                        const selected = visibleIds.includes(col.id);
+                                        return (jsxs(ListItemButton, { onClick: () => onToggle(col.id), sx: { px: 2, py: 0.4 }, children: [jsx(Box, { component: "span", sx: {
+                                                        mr: 1.25, flexShrink: 0,
+                                                        fontSize: 10, fontWeight: 700,
+                                                        px: 0.75, py: '2px',
+                                                        borderRadius: '4px',
+                                                        bgcolor: TYPE_PILL.text.bg,
+                                                        color: TYPE_PILL.text.color,
+                                                        textTransform: 'uppercase',
+                                                        letterSpacing: 0.4,
+                                                        lineHeight: 1.6,
+                                                    }, children: "Text" }), jsx(ListItemText, { primary: col.label, primaryTypographyProps: {
+                                                        fontSize: 13,
+                                                        color: selected ? 'primary.main' : 'text.primary',
+                                                    } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }, col.id));
+                                    }) })] }))] }) })] }));
+};
+const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, }) => {
+    const getColValue = (id) => columnFilters.find((f) => f.id === id)?.value ?? '';
+    const applyColFilter = (id, value) => {
+        const rest = columnFilters.filter((f) => f.id !== id);
+        onColumnFilterChange(value ? [...rest, { id, value }] : rest);
+    };
+    const removeFilter = (id) => {
+        const def = serverFilterDefs.find((d) => d.id === id);
+        if (def?.type === 'dateRange') {
+            onFilterValuesChange({ ...filterValues, [def.fromKey]: '', [def.toKey]: '' });
+        }
+        else if (def?.type === 'text' || def?.type === 'dropdown') {
+            onFilterValuesChange({ ...filterValues, [def.filterKey]: '' });
+        }
+        else if (def?.type === 'date') {
+            applyColFilter(def.columnKey, '');
+        }
+        else {
+            applyColFilter(id, '');
+        }
+        onToggleFilter(id);
+    };
+    return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.75 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.4, mr: 0.25 }, children: [jsx(FilterListIcon, { sx: { fontSize: 15, color: 'text.disabled' } }), jsx(Typography, { variant: "body2", fontSize: 12, color: "text.secondary", fontWeight: 500, noWrap: true, children: "Filter by:" })] }), visibleFilterIds.map((id) => {
+                const def = serverFilterDefs.find((d) => d.id === id);
+                if (def?.type === 'dateRange') {
+                    return (jsx(DateRangeChip, { label: def.label, fromDate: filterValues[def.fromKey] ?? '', toDate: filterValues[def.toKey] ?? '', onApply: (from, to) => onFilterValuesChange({ ...filterValues, [def.fromKey]: from, [def.toKey]: to }), onRemove: () => removeFilter(id) }, id));
+                }
+                if (def?.type === 'text') {
+                    return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder }, id));
+                }
+                if (def?.type === 'dropdown') {
+                    return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id) }, id));
+                }
+                if (def?.type === 'date') {
+                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id) }, id));
+                }
+                // Column filter chip
+                const col = availableColumns.find((c) => c.id === id);
+                if (!col)
+                    return null;
+                return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}` }, id));
+            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter })] }));
+};
+
+export { DynamicFilterBar as default };

package/dist/components/PaginatedGrid/GenericPaginatedGrid.d.ts

@@ -0,0 +1,40 @@
+import { type MRT_ColumnDef } from 'material-react-table';
+import { type ServerFilterDef } from './DynamicFilterBar';
+export type { ServerFilterDef };
+/** Shape that fetchPage must return. */
+export interface PagedResult<TData> {
+    data: TData[];
+    totalRecords: number;
+}
+export interface GenericPaginatedGridProps<TData extends object> {
+    /** MRT column definitions typed to your data shape. */
+    columns: MRT_ColumnDef<TData>[];
+    /**
+     * Async function called on every page/filter change.
+     * Receives the current flat filter map and the 0-based page index.
+     */
+    fetchPage: (filters: Record<string, string>, pageIndex: number) => Promise<PagedResult<TData>>;
+    /** Base react-query cache key. */
+    queryKey: unknown[];
+    /** Server-side filter chip definitions. */
+    serverFilterDefs: ServerFilterDef[];
+    /** Initial key → value map for every server filter. */
+    defaultFilters: Record<string, string>;
+    /** Which chip IDs are visible on first render. Defaults to first entry. */
+    defaultVisibleFilterIds?: string[];
+    /** Number of rows fetched per API call. Default: 10 000. */
+    batchSize?: number;
+    /** CSV file name prefix. Default: "export". */
+    exportFilename?: string;
+    /** max-height of the scrollable table body. Default: "60vh". */
+    tableHeight?: string;
+    /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
+    pageSizeOptions?: number[];
+    /**
+     * Background colour applied to every header cell.
+     * Accepts any valid CSS colour string.
+     */
+    headerBgColor?: string;
+}
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, pageSizeOptions, headerBgColor, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default GenericPaginatedGrid;

package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js

@@ -0,0 +1,222 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
+import { keepPreviousData } from '../../node_modules/@tanstack/query-core/build/modern/utils.esm.js';
+import { useQuery } from '../../node_modules/@tanstack/react-query/build/modern/useQuery.esm.js';
+import { Box, Tooltip, IconButton, Button, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import DynamicFilterBar from './DynamicFilterBar.esm.js';
+
+// ─── Internal: overlay loader ─────────────────────────────────────────────────
+const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
+        position: 'absolute', inset: 0,
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center',
+        bgcolor: 'rgba(255,255,255,0.80)', backdropFilter: 'blur(2px)',
+        zIndex: 10, gap: 1.5,
+    }, children: [jsx(CircularProgress, { size: 50, thickness: 4 }), jsx(Typography, { variant: "body2", color: "text.secondary", fontWeight: 500, children: message })] }));
+const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, }) => {
+    const startRow = totalRecords === 0 ? 0 : pageIndex * pageSize + 1;
+    const endRow = Math.min((pageIndex + 1) * pageSize, totalRecords);
+    return (jsxs(Box, { sx: {
+            display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
+            gap: { xs: 1.5, md: 3 }, px: 2, py: 0.75,
+            borderTop: '1px solid', borderColor: 'divider',
+            bgcolor: 'background.paper', flexWrap: 'wrap', minHeight: 48,
+        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), size: "small", variant: "outlined", sx: {
+                            height: 28, fontSize: 13, minWidth: 80,
+                            '.MuiSelect-select': { py: '3px !important' },
+                            '.MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
+                        }, children: pageSizeOptions.map((opt) => (jsx(MenuItem, { value: opt, sx: { fontSize: 13 }, children: opt.toLocaleString() }, opt))) })] }), jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: isLoading || (isFetching && totalRecords === 0)
+                    ? 'Loading…'
+                    : totalRecords === 0
+                        ? 'No records'
+                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onFirst, disabled: !canPrev, children: jsx(FirstPageIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onPrev, disabled: !canPrev, children: jsx(ChevronLeftIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Typography, { variant: "body2", fontWeight: 600, sx: {
+                            mx: 0.5, minWidth: 28, height: 28,
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            borderRadius: 1, border: '1px solid', borderColor: 'primary.main',
+                            color: 'primary.main', bgcolor: 'rgba(25,118,210,0.07)', fontSize: 13,
+                        }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, children: jsx(ChevronRightIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, children: jsx(LastPageIcon, { sx: { fontSize: 20 } }) }) }) })] })] }));
+};
+// ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight = '60vh', pageSizeOptions = [1000, 5000, 10000], headerBgColor, }) {
+    const defaultVisible = defaultVisibleFilterIds
+        ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
+    // ── State ──────────────────────────────────────────────────────────────────
+    const [filterValues, setFilterValues] = useState(defaultFilters);
+    const [visibleFilterIds, setVisibleFilterIds] = useState(defaultVisible);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: batchSize,
+    });
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [columnPinning, setColumnPinning] = useState({});
+    // ── Data fetching ──────────────────────────────────────────────────────────
+    const { data, isLoading, isError, isFetching, refetch } = useQuery({
+        queryKey: [...queryKey, filterValues, pagination.pageIndex],
+        queryFn: () => fetchPage(filterValues, pagination.pageIndex),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    const rows = data?.data ?? [];
+    const totalRecords = data?.totalRecords ?? 0;
+    // ── Derive column list for filter chip picker ──────────────────────────────
+    const availableColumns = useMemo(() => {
+        const serverManagedColKeys = new Set(serverFilterDefs
+            .filter((d) => d.type === 'date')
+            .map((d) => d.columnKey));
+        return columns
+            .filter((c) => 'accessorKey' in c && c.accessorKey && !serverManagedColKeys.has(c.accessorKey))
+            .map((c) => ({ id: c.accessorKey, label: c.header }));
+    }, [columns, serverFilterDefs]);
+    // ── Handlers ───────────────────────────────────────────────────────────────
+    const handleFilterValuesChange = (newValues) => {
+        setFilterValues(newValues);
+        setPagination((p) => ({ ...p, pageIndex: 0 }));
+    };
+    const handleToggleFilter = (id) => setVisibleFilterIds((prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]);
+    const handleClearAll = () => {
+        setFilterValues(defaultFilters);
+        setColumnFilters([]);
+        setVisibleFilterIds(defaultVisible);
+        setPagination((p) => ({ ...p, pageIndex: 0 }));
+    };
+    const handleExport = () => {
+        const headers = columns.map((c) => c.header).join(',');
+        const csvRows = rows.map((row) => columns
+            .map((c) => {
+            const key = c.accessorKey ?? '';
+            const val = row[key] ?? '';
+            return `"${String(val).replace(/"/g, '""')}"`;
+        })
+            .join(','));
+        const blob = new Blob([[headers, ...csvRows].join('\n')], { type: 'text/csv' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${exportFilename}-page${pagination.pageIndex + 1}.csv`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const hasAnyValue = Object.values(filterValues).some(Boolean) ||
+        columnFilters.some((f) => f.value);
+    // ── Table instance ─────────────────────────────────────────────────────────
+    const table = useMaterialReactTable({
+        columns,
+        data: rows,
+        manualPagination: true,
+        rowCount: totalRecords,
+        manualSorting: false,
+        manualFiltering: false,
+        state: {
+            pagination,
+            sorting,
+            columnFilters,
+            globalFilter,
+            columnPinning,
+            showAlertBanner: isError,
+            showProgressBars: false,
+        },
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnPinningChange: (updater) => {
+            setColumnPinning((prev) => {
+                const next = typeof updater === 'function' ? updater(prev) : updater;
+                return { ...next, right: [] };
+            });
+        },
+        enableColumnResizing: true,
+        enableColumnOrdering: true,
+        enableColumnActions: false,
+        enableColumnPinning: true,
+        columnResizeMode: 'onChange',
+        enableFilters: false,
+        enableGlobalFilter: true,
+        enableDensityToggle: true,
+        enableFullScreenToggle: true,
+        enableHiding: true,
+        enableStickyHeader: true,
+        enableRowVirtualization: true,
+        muiTableContainerProps: { sx: { maxHeight: tableHeight } },
+        muiTopToolbarProps: {
+            sx: {
+                alignItems: 'center',
+                flexWrap: 'nowrap',
+            },
+        },
+        muiTableHeadCellProps: ({ column }) => {
+            const colProps = column.columnDef.muiTableHeadCellProps;
+            const align = colProps && typeof colProps !== 'function'
+                ? colProps.align
+                : undefined;
+            const justifyContent = align === 'right' ? 'flex-start'
+                : align === 'center' ? 'center'
+                    : 'flex-end';
+            return {
+                align: (align ?? 'left'),
+                sx: {
+                    ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
+                    verticalAlign: 'bottom',
+                    whiteSpace: 'normal',
+                    borderRight: '1px solid rgba(224,224,224,1)',
+                    borderBottom: '2px solid rgba(0,0,0,0.15)',
+                    '& button[aria-label="Move"]': { display: 'none' },
+                    '& .MuiTableSortLabel-icon': { display: 'none' },
+                    '& .Mui-TableHeadCell-ResizeHandle-Wrapper': {
+                        height: '100%',
+                        top: 0,
+                    },
+                    '& .Mui-TableHeadCell-ResizeHandle-Divider': {
+                        borderRight: 'none',
+                    },
+                    '& .Mui-TableHeadCell-Content': {
+                        alignItems: 'flex-end',
+                        justifyContent,
+                    },
+                    '& .Mui-TableHeadCell-Content-Labels': {
+                        flexWrap: 'wrap',
+                        whiteSpace: 'normal',
+                        overflowWrap: 'normal',
+                        lineHeight: 1.3,
+                        justifyContent,
+                    },
+                    '& .Mui-TableHeadCell-Content-Wrapper': {
+                        whiteSpace: 'normal',
+                        overflow: 'visible',
+                    },
+                },
+            };
+        },
+        muiTableBodyCellProps: {
+            sx: {
+                whiteSpace: 'nowrap',
+                borderRight: '1px solid rgba(224,224,224,1)',
+            },
+        },
+        muiToolbarAlertBannerProps: isError
+            ? { color: 'error', children: 'Failed to load data. Please try again.' }
+            : undefined,
+        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Refresh current batch", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => refetch(), disabled: isFetching, children: jsx(RefreshIcon, { fontSize: "small" }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns }) }), hasAnyValue && (jsx(Button, { size: "small", onClick: handleClearAll, sx: {
+                        flexShrink: 0,
+                        textTransform: 'none',
+                        fontSize: 12,
+                        color: 'error.main',
+                        minWidth: 'auto',
+                        px: 1,
+                        '&:hover': { bgcolor: 'rgba(211,47,47,0.06)' },
+                    }, children: "Clear All" }))] })),
+        renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions })),
+    });
+    return (jsxs(Box, { sx: { position: 'relative' }, children: [jsx(GlobalStyles, { styles: { 'button[aria-label="Pin to right"]': { display: 'none' } } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(MaterialReactTable, { table: table })] }));
+}
+
+export { GenericPaginatedGrid as default };

package/dist/components/PaginatedGrid/InvoiceGrid.d.ts

@@ -0,0 +1,2 @@
+declare const InvoiceGrid: () => import("react/jsx-runtime").JSX.Element;
+export default InvoiceGrid;

package/dist/components/PaginatedGrid/columns.d.ts

@@ -0,0 +1,3 @@
+import type { MRT_ColumnDef } from 'material-react-table';
+import type { InvoiceDetail } from './types';
+export declare const invoiceColumns: MRT_ColumnDef<InvoiceDetail>[];

package/dist/components/PaginatedGrid/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const formatDate: (dateString: string) => string;
+export declare const formatINR: (value: number) => string;
+export declare const formatNumber: (value: number, decimals?: number) => string;

package/dist/components/PaginatedGrid/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GenericPaginatedGrid } from './GenericPaginatedGrid';
+export type { GenericPaginatedGridProps, PagedResult } from './GenericPaginatedGrid';
+export { default as DynamicFilterBar } from './DynamicFilterBar';
+export type { ServerFilterDef } from './DynamicFilterBar';

package/dist/components/PaginatedGrid/index.esm.js

@@ -0,0 +1,2 @@
+export { default as GenericPaginatedGrid } from './GenericPaginatedGrid.esm.js';
+export { default as DynamicFilterBar } from './DynamicFilterBar.esm.js';

package/dist/components/PaginatedGrid/invoiceApi.d.ts

@@ -0,0 +1,2 @@
+import type { InvoiceRequest, InvoiceApiResponse } from './types';
+export declare const fetchInvoiceDetails: (request: InvoiceRequest) => Promise<InvoiceApiResponse>;