@pagamio/frontend-commons-lib 0.8.358 → 0.8.360

package/lib/components/ui/DateRangePickerWithPresets.js

@@ -11,6 +11,12 @@ import { Popover, PopoverContent, PopoverTrigger } from './Popover';
 // =============================================================================
 // PRESET DEFINITIONS (used for display text + preset detection)
 // =============================================================================
+// "All Time" is intentionally not in PRESET_RANGES because it has no concrete
+// date range — it represents the absence of a date filter. It is surfaced in
+// the trigger label and the picker treats `selectedPreset === 'all_time'` as
+// "no value", letting consumers pass empty startDate/endDate to the backend.
+const ALL_TIME_PRESET_VALUE = 'all_time';
+const ALL_TIME_PRESET_LABEL = 'All Time';
 const PRESET_RANGES = [
     {
         label: 'Today',
@@ -113,6 +119,9 @@ const DateRangePickerWithPresets = ({ value, onChange, selectedPreset = 'last_7_
             }
             return format(value.from, dateFormat);
         }
+        if (selectedPreset === ALL_TIME_PRESET_VALUE) {
+            return ALL_TIME_PRESET_LABEL;
+        }
         if (selectedPreset && selectedPreset !== 'custom') {
             const match = PRESET_RANGES.find((p) => p.value === selectedPreset);
             if (match)
@@ -139,7 +148,9 @@ const DateRangePickerWithPresets = ({ value, onChange, selectedPreset = 'last_7_
         e.stopPropagation();
         onChange?.(undefined, undefined);
     };
-    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0 bg-popover text-popover-foreground border border-border shadow-lg", align: "start", sideOffset: 8, children: _jsx(DateRangePicker, { ranges: [selectionRange], onChange: handleRangeChange, moveRangeOnFirstSelection: false, months: numberOfMonths, direction: "horizontal", showDateDisplay: false, showPreview: true, minDate: minDate, maxDate: maxDate, rangeColors: rangeColors, staticRanges: staticRanges, inputRanges: [] }) })] }));
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", disabled: disabled, className: cn('w-auto justify-start text-left font-normal', !value && 'text-muted-foreground', className), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: displayText }), showClearButton && value?.from && (_jsx(X, { className: "ml-2 h-4 w-4 opacity-50 hover:opacity-100 cursor-pointer", onClick: handleClear }))] }) }), _jsxs(PopoverContent, { className: "w-auto p-0 bg-popover text-popover-foreground border border-border shadow-lg", align: "start", sideOffset: 8, children: [_jsx("button", { type: "button", onClick: () => onChange?.(undefined, ALL_TIME_PRESET_VALUE), className: cn('w-full border-b border-border px-4 py-3 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground', selectedPreset === ALL_TIME_PRESET_VALUE && !value?.from
+                            ? 'bg-accent font-semibold text-accent-foreground'
+                            : 'text-popover-foreground'), children: ALL_TIME_PRESET_LABEL }), _jsx(DateRangePicker, { ranges: [selectionRange], onChange: handleRangeChange, moveRangeOnFirstSelection: false, months: numberOfMonths, direction: "horizontal", showDateDisplay: false, showPreview: true, minDate: minDate, maxDate: maxDate, rangeColors: rangeColors, staticRanges: staticRanges, inputRanges: [] })] })] }));
 };
 DateRangePickerWithPresets.displayName = 'DateRangePickerWithPresets';
 export default DateRangePickerWithPresets;

package/lib/dashboard-visuals/v2/components/DashboardChartRow.js

@@ -80,7 +80,7 @@ const ChartRenderer = ({ config, loading }) => {
         case 'heatmap': {
             // Heatmap expects series: { name, data: { x, y }[] }[]
             const data = config.data;
-            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(HeatmapChartV2, { series: data.series, height: chartHeight, colors: chartColors, className: config.chartClassName }) }));
+            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(HeatmapChartV2, { series: data.series, height: chartHeight, colors: chartColors, options: config.options, className: config.chartClassName }) }));
         }
         default:
             return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, className: config.cardClassName, children: _jsxs("div", { className: "flex items-center justify-center text-muted-foreground", style: { height: chartHeight }, children: ["Unsupported chart type: ", config.type] }) }));

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

@@ -1,3 +1,3 @@
 import type { PagamioTableProps } from './types';
-declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, isFetching, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, isFetching, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, fetchAllData, enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PagamioTable;

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

@@ -101,7 +101,7 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
                     (typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd ?? (() => { }), icon: HiPlusSm, label: "add-new-entry", className: cn('items-center text-nowrap', isNarrow ? 'w-full' : undefined), children: addText ?? 'Add New Entry' })) : (addButton))] }) }));
 }
 // ─── PagamioTable Component ──────────────────────────────────────────
-const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }) => {
+const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', fetchAllData, enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }) => {
     const [expanded, setExpanded] = useState({});
     const tableRef = useRef(null);
     // ── Internal max-height ─────────────────────────────────────────────
@@ -332,6 +332,14 @@ const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, ro
     });
     // ── Toolbar rendering ──────────────────────────────────────────────
     const showCustomToolbar = toolbarMode === 'custom' && (!!toolbar || !!search || !!filtering);
-    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { ref: tableRef, className: "border border-border rounded-md overflow-y-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
+    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export
+                    ? {
+                        ...toolbar.export,
+                        // Fall back to the hook's top-level fetcher when a consumer's
+                        // toolbar override didn't carry one — keeps "Export all data"
+                        // working even when `toolbar` is replaced wholesale.
+                        fetchAllData: toolbar.export.fetchAllData ?? fetchAllData,
+                    }
+                    : undefined, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { ref: tableRef, className: "border border-border rounded-md overflow-y-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
 };
 export default PagamioTable;

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

@@ -172,6 +172,17 @@ export interface PagamioTableProps<T extends Record<string, any>> {
     }) => ReactNode;
     toolbar?: ToolbarConfig<T>;
     toolbarMode?: 'custom' | 'mrt' | 'none';
+    /**
+     * Server-side "export all" fetcher, auto-wired by `usePagamioTable` as a
+     * TOP-LEVEL prop (not just inside `toolbar.export`). Consumers spread
+     * `{...tableProps}` but frequently pass their own `toolbar={{...}}` for
+     * add-buttons/filters, which would otherwise drop the hook's
+     * `toolbar.export.fetchAllData` and silently break "Export all data".
+     * PagamioTable falls back to this when `toolbar.export.fetchAllData` is unset,
+     * so export-all keeps working regardless of a toolbar override. A consumer
+     * can still override by setting `toolbar.export.fetchAllData` explicitly.
+     */
+    fetchAllData?: (params?: Record<string, string>, onProgress?: (fetched: number, total: number) => void) => Promise<T[]>;
     enableColumnResizing?: boolean;
     enableColumnPinning?: boolean;
     enableColumnOrdering?: boolean;

package/lib/shared/hooks/usePagamioTable.js

@@ -327,6 +327,10 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         isLoading,
         isFetching,
         rowCount: totalItems,
+        // Top-level so it survives a consumer's `toolbar={{...}}` override.
+        // PagamioTable falls back to this for export-all. Only for server mode
+        // (client tables already hold the whole set).
+        ...(isServerMode && { fetchAllData: fetchAllPages }),
         ...(paginationConfig.enabled && {
             pagination: {
                 pageIndex: currentPage,

package/lib/styles.css

@@ -3936,6 +3936,84 @@ video {
   width: auto !important;
   min-width: 0 !important;
 }
+
+/* react-date-range ships a light-only theme. Re-skin its surfaces with our
+ * popover / muted / border tokens so the date-range picker matches dark mode.
+ * Selection highlight stays untouched — the component already drives that
+ * via the `rangeColors` prop pulled from `--primary` at runtime.
+ */
+.dark .rdrCalendarWrapper,
+.dark .rdrDateRangeWrapper,
+.dark .rdrDefinedRangesWrapper {
+  background: hsl(var(--popover)) !important;
+  color: hsl(var(--popover-foreground)) !important;
+}
+.dark .rdrDefinedRangesWrapper {
+  border-right: 1px solid hsl(var(--border)) !important;
+}
+.dark .rdrStaticRanges {
+  background: transparent !important;
+}
+.dark .rdrStaticRange {
+  background: transparent !important;
+  border-bottom: 1px solid hsl(var(--border)) !important;
+}
+.dark .rdrStaticRange:hover .rdrStaticRangeLabel,
+.dark .rdrStaticRange:focus .rdrStaticRangeLabel {
+  background: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+.dark .rdrStaticRangeLabel {
+  color: hsl(var(--popover-foreground)) !important;
+}
+.dark .rdrStaticRangeSelected .rdrStaticRangeLabel {
+  color: hsl(var(--primary)) !important;
+  font-weight: 600;
+}
+.dark .rdrMonthAndYearWrapper,
+.dark .rdrMonth {
+  background: transparent !important;
+  color: hsl(var(--popover-foreground)) !important;
+}
+.dark .rdrMonthName,
+.dark .rdrWeekDay {
+  color: hsl(var(--muted-foreground)) !important;
+}
+.dark .rdrMonthAndYearPickers select {
+  color: hsl(var(--popover-foreground)) !important;
+  background-color: transparent !important;
+}
+.dark .rdrMonthAndYearPickers select:hover {
+  background-color: hsl(var(--accent)) !important;
+}
+.dark .rdrNextPrevButton {
+  background: hsl(var(--muted)) !important;
+}
+.dark .rdrNextPrevButton:hover {
+  background: hsl(var(--accent)) !important;
+}
+.dark .rdrPprevButton i {
+  border-color: transparent hsl(var(--popover-foreground)) transparent transparent !important;
+}
+.dark .rdrNextButton i {
+  border-color: transparent transparent transparent hsl(var(--popover-foreground)) !important;
+}
+.dark .rdrDayNumber span {
+  color: hsl(var(--popover-foreground)) !important;
+}
+.dark .rdrDayPassive .rdrDayNumber span {
+  color: hsl(var(--muted-foreground)) !important;
+}
+.dark .rdrDayDisabled {
+  background: transparent !important;
+}
+.dark .rdrDayDisabled .rdrDayNumber span {
+  color: hsl(var(--muted-foreground)) !important;
+  opacity: 0.5;
+}
+.dark .rdrDayToday .rdrDayNumber span:after {
+  background: hsl(var(--primary)) !important;
+}
 .file\:-ms-4::file-selector-button {
   margin-inline-start: -1rem;
 }

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