@pagamio/frontend-commons-lib 0.8.194 → 0.8.195

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,10 +32,19 @@ 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')
+            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,
         })), showClearFilters: true, selectedFilters: selectedFilters, handleFilterChange: handleFilterChange, handleApplyFilters: handleApplyFilters, resetFilters: resetFilters, isNarrow: isNarrow }));
 };
@@ -114,11 +123,33 @@ 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: 'startDate',
+                label: 'Start Date',
+                placeholder: 'Select start date',
+                type: 'date',
+                options: [],
+                multi: false,
+            }, {
+                name: 'endDate',
+                label: 'End Date',
+                placeholder: 'Select end date',
+                type: 'date',
+                options: [],
+                multi: false,
+            });
+        }
+        return baseFilters;
+    }, [config.filters, selectedFilters?.dateRange]);
     const renderContent = () => {
         return renderFilterComponent({
             isLoading: loading,
             error,
-            filters: config.filters,
+            filters: dashboardFilters,
             filterOptions,
             selectedFilters,
             handleFilterChange,

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.195",
   "publishConfig": {
     "access": "public",
     "provenance": false