@pagamio/frontend-commons-lib 0.8.194 → 0.8.196

package/lib/components/ui/FilterComponent.d.ts

@@ -1,27 +1,31 @@
 import type { ChangeEvent } from 'react';
 import React from 'react';
-interface FilterComponentProps {
-    filters: Array<{
-        name: string;
-        placeholder?: string;
-        type: 'select' | 'multi-select' | 'date';
-        options?: Array<{
-            label: string;
-            value: string;
-        }>;
-        dateValue?: Date | null;
-        onDateChange?: (date: Date) => void;
+type FilterValue = string | string[] | Date | null | undefined;
+interface FilterDefinition {
+    name: string;
+    placeholder?: string;
+    type?: 'select' | 'multi-select' | 'date' | 'date-range';
+    options?: Array<{
+        label: string;
+        value: string;
     }>;
+    rangeKeys?: {
+        start: string;
+        end: string;
+    };
+}
+interface FilterComponentProps {
+    filters: FilterDefinition[];
     searctInputPlaceHolder?: string;
     showApplyFilterButton?: boolean;
     showClearFilters: boolean;
     showApplyFilters?: boolean;
-    selectedFilters: Record<string, string | string[] | Date | null>;
+    selectedFilters: Record<string, FilterValue>;
     showSearch?: boolean;
     searchQuery?: string;
     isNarrow: boolean;
     children?: React.ReactNode;
-    handleFilterChange: (name: string, value: string | string[] | Date | null) => void;
+    handleFilterChange: (name: string, value: FilterValue) => void;
     handleApplyFilters: () => void;
     resetFilters: () => void;
     onSearch?: (e: ChangeEvent<HTMLInputElement>) => void;

package/lib/components/ui/FilterComponent.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input, MultiSelect, Select } from '@mantine/core';
-import { IconSearch } from '@tabler/icons-react';
+import { IconCalendar, IconSearch } from '@tabler/icons-react';
+import { format } from 'date-fns';
+import React from 'react';
 import { isDefaultFilterValue } from '../../shared/utils/filterUtils';
 import Button from './Button';
 import DatePicker from './DatePicker';
 import FilterWrapper from './FilterWrapper';
+import { Popover, PopoverContent, PopoverTrigger } from './Popover';
+import RangeDatePicker from './RangeDatePicker';
 const sharedStyles = {
     input: {
         borderRadius: '6px',
@@ -33,8 +37,19 @@ const commonProps = {
     style: { width: 240 },
 };
 const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = true, showClearFilters, searctInputPlaceHolder = 'Search...', showApplyFilters = true, showSearch = false, searchQuery = '', children, isNarrow, handleFilterChange, handleApplyFilters, resetFilters, onSearch = () => { }, }) => {
+    const [activeRangePicker, setActiveRangePicker] = React.useState(null);
     const hasSelectedActiveFilters = Object.entries(selectedFilters).some(([key, v]) => !isDefaultFilterValue(v, key));
     const shouldShowActionButtons = hasSelectedActiveFilters || (showSearch && searchQuery.length > 0);
+    const parseDateValue = (value) => {
+        if (!value)
+            return null;
+        if (value instanceof Date)
+            return value;
+        if (Array.isArray(value))
+            return null;
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    };
     // Keyboard handler for search input
     const handleSearchKeyDown = (e) => {
         if (e.key === 'Enter') {
@@ -59,6 +74,39 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                         const { name, type, options } = filter;
                         const value = selectedFilters[name];
                         const renderFilterInput = () => {
+                            if (type === 'date-range') {
+                                const rangeKeys = filter.rangeKeys;
+                                if (!rangeKeys) {
+                                    console.warn('Date range filter requires rangeKeys', filter);
+                                    return null;
+                                }
+                                const startDateValue = rangeKeys ? selectedFilters[rangeKeys.start] : undefined;
+                                const endDateValue = rangeKeys ? selectedFilters[rangeKeys.end] : undefined;
+                                const startDate = parseDateValue(startDateValue);
+                                const endDate = parseDateValue(endDateValue);
+                                const displayValue = startDate && endDate
+                                    ? `${format(startDate, 'dd MMM yyyy')} - ${format(endDate, 'dd MMM yyyy')}`
+                                    : (filter.placeholder ?? 'Select date range');
+                                const applyRange = (start, end) => {
+                                    if (!rangeKeys)
+                                        return;
+                                    handleFilterChange(rangeKeys.start, start);
+                                    handleFilterChange(rangeKeys.end, end);
+                                };
+                                const rangeSelection = {
+                                    startDate: startDate ?? new Date(),
+                                    endDate: endDate ?? startDate ?? new Date(),
+                                    key: name,
+                                };
+                                return (_jsxs(Popover, { open: activeRangePicker === name, onOpenChange: (open) => setActiveRangePicker(open ? name : null), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-left text-sm text-gray-700 shadow-sm transition hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconCalendar, { size: 16, className: "text-gray-500" }), _jsx("span", { className: !startDate || !endDate ? 'text-gray-400' : '', children: displayValue })] }) }) }), _jsx(PopoverContent, { align: "start", className: "w-auto border border-gray-200 bg-white p-0 shadow-2xl", children: _jsxs("div", { className: "p-4", children: [_jsx(RangeDatePicker, { dateRange: rangeSelection, rangeKey: name, onChange: (updatedRange) => {
+                                                            if (updatedRange.startDate) {
+                                                                applyRange(updatedRange.startDate, updatedRange.endDate ?? updatedRange.startDate);
+                                                            }
+                                                        }, months: 2, showPreview: false }), _jsxs("div", { className: "flex justify-end gap-2 pt-3", children: [_jsx(Button, { variant: "outline-primary", type: "button", onClick: () => {
+                                                                    applyRange(null, null);
+                                                                    setActiveRangePicker(null);
+                                                                }, className: "h-9 px-3", children: "Clear" }), _jsx(Button, { variant: "primary", type: "button", onClick: () => setActiveRangePicker(null), className: "h-9 px-4", children: "Done" })] })] }) })] }));
+                            }
                             if (type === 'date') {
                                 return (_jsx(DatePicker, { value: value || null, onChange: (date) => handleFilterChange(name, date), placeholder: filter.placeholder ?? `Select ${name}` }));
                             }

package/lib/components/ui/RangeDatePicker.d.ts

@@ -51,28 +51,5 @@ export interface RangeDatePickerProps {
      */
     rangeKey?: string;
 }
-/**
- * A flexible date range picker component using react-date-range
- *
- * @see For more customization options, refer to:
- * - https://hypeserver.github.io/react-date-range/
- * - https://www.npmjs.com/package/react-date-range
- *
- * @example
- * ```tsx
- * const [selectedRange, setSelectedRange] = useState({
- *   startDate: startOfDay(new Date()),
- *   endDate: endOfDay(addDays(new Date(), 3)),
- * });
- *
- * return (
- *   <RangeDatePicker
- *     dateRange={selectedRange}
- *     onChange={setSelectedRange}
- *     showPreview={true}
- *   />
- * )
- * ```
- */
 declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
 export default RangeDatePicker;

package/lib/components/ui/RangeDatePicker.js

@@ -4,7 +4,7 @@ import { DateRangePicker } from 'react-date-range';
 import 'react-date-range/dist/styles.css';
 // main style file
 import 'react-date-range/dist/theme/default.css';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { cn } from '../../helpers';
 /**
  * A flexible date range picker component using react-date-range
@@ -29,6 +29,25 @@ import { cn } from '../../helpers';
  * )
  * ```
  */
+const FALLBACK_PRIMARY = '#b45dae';
+const getPrimaryColorFromTheme = () => {
+    if (typeof window === 'undefined') {
+        return FALLBACK_PRIMARY;
+    }
+    try {
+        const probe = document.createElement('span');
+        probe.style.display = 'none';
+        probe.className = 'bg-primary-500';
+        document.body.appendChild(probe);
+        const computedColor = window.getComputedStyle(probe).backgroundColor;
+        document.body.removeChild(probe);
+        return computedColor || FALLBACK_PRIMARY;
+    }
+    catch (error) {
+        console.warn('Unable to infer primary color from theme; falling back.', error);
+        return FALLBACK_PRIMARY;
+    }
+};
 const RangeDatePicker = ({ dateRange, onChange, minDate, maxDate, className, months = 2, direction = 'horizontal', showPreview = true, rangeKey = 'selection', }) => {
     // Default range: today to 7 days from now
     const defaultRange = {
@@ -37,6 +56,8 @@ const RangeDatePicker = ({ dateRange, onChange, minDate, maxDate, className, mon
         key: rangeKey,
     };
     const [range, setRange] = useState(dateRange ?? defaultRange);
+    const [primaryColor, setPrimaryColor] = useState(FALLBACK_PRIMARY);
+    const memoizedRangeColors = useMemo(() => [primaryColor], [primaryColor]);
     // Update internal state when dateRange prop changes
     useEffect(() => {
         if (dateRange) {
@@ -46,6 +67,9 @@ const RangeDatePicker = ({ dateRange, onChange, minDate, maxDate, className, mon
             });
         }
     }, [dateRange, rangeKey]);
+    useEffect(() => {
+        setPrimaryColor(getPrimaryColorFromTheme());
+    }, []);
     // Handle date range changes
     const handleRangeChange = (rangesByKey) => {
         const newRange = rangesByKey[rangeKey];
@@ -63,6 +87,6 @@ const RangeDatePicker = ({ dateRange, onChange, minDate, maxDate, className, mon
             }
         }
     };
-    return (_jsx("div", { className: cn('range-date-picker', className), children: _jsx(DateRangePicker, { ranges: [range], onChange: handleRangeChange, moveRangeOnFirstSelection: false, months: months, direction: direction, showPreview: showPreview, showDateDisplay: true, minDate: minDate, maxDate: maxDate, rangeColors: ['#b45dae'] }) }));
+    return (_jsx("div", { className: cn('range-date-picker', className), children: _jsx(DateRangePicker, { ranges: [range], onChange: handleRangeChange, moveRangeOnFirstSelection: false, months: months, direction: direction, showPreview: showPreview, showDateDisplay: true, minDate: minDate, maxDate: maxDate, rangeColors: memoizedRangeColors }) }));
 };
 export default RangeDatePicker;

package/lib/dashboard-visuals/components/types.d.ts

@@ -48,6 +48,10 @@ export interface FilterConfig {
     tourUrl?: string;
     query?: any;
     multi?: boolean;
+    rangeKeys?: {
+        start: string;
+        end: string;
+    };
 }
 export interface Visual {
     type: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { FilterConfig } from './components/types';
-type FilterValue = string | string[] | Date | null;
+type FilterValue = string | string[] | Date | null | undefined;
 interface Config {
     title: string;
     summary: string;

package/lib/dashboard-visuals/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Grid } from '@mantine/core';
 import { Card } from 'flowbite-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useApi } from '../api';
 import { FilterComponent, Tab } from '../components';
 import { useMediaQueries } from '../shared';
@@ -32,11 +32,23 @@ const renderFilterComponent = ({ isLoading, error, filters, filterOptions, selec
     if (error) {
         return (_jsx(Card, { className: "mb-5", children: _jsx(ErrorState, { error: error, onRetry: handleRetry }) }));
     }
+    const resolveFilterType = (filter) => {
+        if (filter.type === 'date-range')
+            return 'date-range';
+        if (filter.type === 'date')
+            return 'date';
+        if (filter.type === 'multi-select')
+            return 'multi-select';
+        if (filter.type === 'select')
+            return 'select';
+        return filter.multi ? 'multi-select' : 'select';
+    };
     return (_jsx(FilterComponent, { filters: filters.map((filter) => ({
             name: filter.name,
             placeholder: filter.placeholder ?? `Select ${filter.name}`,
-            type: filter.multi ? 'multi-select' : 'select',
+            type: resolveFilterType(filter),
             options: filterOptions[filter.name] || filter.options,
+            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 = () => { }, }) => {
@@ -114,11 +126,30 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
             isNarrow: isSm,
         });
     };
+    const dashboardFilters = useMemo(() => {
+        const baseFilters = [...config.filters];
+        const dateRangeValue = typeof selectedFilters?.dateRange === 'string' ? selectedFilters.dateRange.toUpperCase() : '';
+        if (dateRangeValue === 'CUSTOM_RANGE') {
+            baseFilters.push({
+                name: 'customDateRange',
+                label: 'Custom Date Range',
+                placeholder: 'Select date range',
+                type: 'date-range',
+                options: [],
+                multi: false,
+                rangeKeys: {
+                    start: 'startDate',
+                    end: 'endDate',
+                },
+            });
+        }
+        return baseFilters;
+    }, [config.filters, selectedFilters?.dateRange]);
     const renderContent = () => {
         return renderFilterComponent({
             isLoading: loading,
             error,
-            filters: config.filters,
+            filters: dashboardFilters,
             filterOptions,
             selectedFilters,
             handleFilterChange,

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

@@ -11,6 +11,7 @@ const TableToolbar = ({ searchable, searchQuery, onSearch, filters = [], applied
             type: filterObj.type || 'select',
             options: filterObj.options,
             placeholder: filterObj.placeholder,
+            rangeKeys: filterObj.rangeKeys,
         })), searctInputPlaceHolder: searctInputPlaceHolder, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, selectedFilters: appliedFilters, handleFilterChange: (name, value) => {
             if (value instanceof Date) {
                 handleFilter(name, value.toISOString());

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

@@ -154,13 +154,17 @@ export interface BaseEntity {
 export interface BaseFilter {
     columnKey: string;
     label?: string;
-    type?: 'select' | 'multi-select' | 'date' | 'range' | 'boolean';
-    options: Array<{
+    type?: 'select' | 'multi-select' | 'date' | 'date-range' | 'range' | 'boolean';
+    options?: Array<{
         label: string;
         value: string;
     }>;
     defaultValue?: string | string[];
     placeholder?: string;
+    rangeKeys?: {
+        start: string;
+        end: string;
+    };
 }
 export interface SortConfig {
     sortBy?: string;

package/lib/styles.css

@@ -2998,6 +2998,9 @@ input[type="range"]::-ms-fill-lower {
 .pt-2 {
   padding-top: 0.5rem;
 }
+.pt-3 {
+  padding-top: 0.75rem;
+}
 .pt-4 {
   padding-top: 1rem;
 }
@@ -3432,6 +3435,11 @@ input[type="range"]::-ms-fill-lower {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

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