@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/dashboard-visuals/components/TileSkeleton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TileSkeleton = () => {
+    return (_jsxs("div", { className: "animate-pulse", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded-full w-1/2 mb-4" }), _jsxs("div", { className: "flex justify-between", style: { height: '50px' }, children: [_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-6 bg-gray-200 rounded-full w-24" }), _jsx("div", { className: "h-4 bg-gray-200 rounded-full w-20" })] }), _jsx("div", { className: "h-6 bg-gray-200 rounded-full w-16" })] })] }));
+};
+export default TileSkeleton;

package/lib/dashboard-visuals/components/molecules/Analytics.d.ts

@@ -0,0 +1,11 @@
+import type { DistributionMetricsProps, StatisticsMetricsProps } from '../ChartDetailsModal';
+interface AnalyticsProps {
+    data: any[];
+    valueKey: string;
+    itemMetricsData: StatisticsMetricsProps;
+    valueMetricsData: StatisticsMetricsProps;
+    averageMetricsData: StatisticsMetricsProps;
+    distributionMetricsData: DistributionMetricsProps;
+}
+declare const Analytics: ({ data, valueKey, itemMetricsData, valueMetricsData, averageMetricsData, distributionMetricsData, }: AnalyticsProps) => import("react/jsx-runtime").JSX.Element;
+export default Analytics;

package/lib/dashboard-visuals/components/molecules/Analytics.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import MetricSummaryCard from '../../visuals/MetricSummaryCard';
+import Card from '../CardWrapper';
+import ChartWrapper from '../ChartWrapper';
+const Analytics = ({ data, valueKey, itemMetricsData, valueMetricsData, averageMetricsData, distributionMetricsData, }) => {
+    return (_jsx("div", { className: "w-full h-[60vh]", children: _jsxs("div", { className: "p-4", children: [_jsx("h4", { className: "text-lg font-semibold mb-2", children: "Summary Statistics" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: [_jsx(MetricSummaryCard, { title: itemMetricsData.title, format: itemMetricsData.format, value: itemMetricsData.value, previousValue: itemMetricsData.previousValue, isEmpty: itemMetricsData.isEmpty, loading: itemMetricsData.loading, currency: itemMetricsData.currency, error: itemMetricsData.error, refresh: itemMetricsData.refresh }), _jsx(MetricSummaryCard, { title: valueMetricsData.title, format: valueMetricsData.format, value: valueMetricsData.value, previousValue: valueMetricsData.previousValue, isEmpty: valueMetricsData.isEmpty, loading: valueMetricsData.loading, currency: valueMetricsData.currency, error: valueMetricsData.error, refresh: valueMetricsData.refresh }), _jsx(MetricSummaryCard, { title: averageMetricsData.title, format: averageMetricsData.format, value: averageMetricsData.value, previousValue: averageMetricsData.previousValue, isEmpty: averageMetricsData.isEmpty, loading: averageMetricsData.loading, currency: valueMetricsData.currency, error: averageMetricsData.error, refresh: averageMetricsData.refresh })] }), _jsx("div", { className: "mt-5", children: _jsx(Card, { title: 'Distribution', children: _jsx(ChartWrapper, { loading: distributionMetricsData.loading, error: distributionMetricsData.error, isEmpty: distributionMetricsData.isEmpty, onRetry: distributionMetricsData.refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx(ReactECharts, { option: distributionMetricsData.data, style: { height: '350px' }, opts: { renderer: 'canvas' } }) }) }) }) })] }) }));
+};
+export default Analytics;

package/lib/dashboard-visuals/components/molecules/DataGrid.d.ts

@@ -0,0 +1,15 @@
+import type { QueryProps } from '../../../shared/types';
+import type { TableColumn } from '../../visuals/Table';
+interface DataGridProps<TData extends {
+    id: string | number;
+}> {
+    dataGridQuery: QueryProps;
+    columns: TableColumn<TData>[];
+    searchInputPlaceHolder?: string;
+    searchKey: string;
+    title?: string;
+}
+declare const DataGrid: <TData extends {
+    id: string | number;
+}>({ dataGridQuery, columns, searchInputPlaceHolder, searchKey, title, }: DataGridProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default DataGrid;

package/lib/dashboard-visuals/components/molecules/DataGrid.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionIcon, Tooltip } from '@mantine/core';
+import { IconCopy } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+import { usePaginatedApiSWR } from '../../../api';
+import PagamioTable from '../../../pagamio-table/data-table';
+import { DashboardPaths } from '../../utils';
+import Card from '../CardWrapper';
+import ErrorState from '../ErrorState';
+const DataGrid = ({ dataGridQuery, columns, searchInputPlaceHolder, searchKey, title, }) => {
+    const [sortBy, setSortBy] = useState(undefined);
+    const [sortDir, setSortDir] = useState(undefined);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [currentPage, setCurrentPage] = useState(0);
+    const [appliedSearchQuery, setAppliedSearchQuery] = useState('');
+    const [itemsPerPage, setItemsPerPage] = useState(10);
+    const url = DashboardPaths.PAGED;
+    const defaultSortByData = { sortBy: 'asc' };
+    const enhancedColumns = useMemo(() => {
+        return columns.map((column) => {
+            const extendedColumn = column;
+            if (extendedColumn.enableCopy) {
+                return {
+                    ...extendedColumn,
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    Cell: ({ cell }) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("span", { children: cell.getValue() }), _jsx(Tooltip, { label: "Copy", children: _jsx(ActionIcon, { size: "xs", onClick: () => navigator.clipboard.writeText(cell.getValue()), style: { marginLeft: 8 }, children: _jsx(IconCopy, { size: 16 }) }) })] })),
+                };
+            }
+            if (extendedColumn.formattedCellElement) {
+                return {
+                    ...extendedColumn,
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    Cell: ({ row }) => {
+                        return extendedColumn.formattedCellElement(row.original);
+                    },
+                };
+            }
+            return column;
+        });
+    }, [columns]);
+    // Build the query parameters
+    const queryParams = useMemo(() => {
+        let resolvedSortDirection;
+        if (sortDir) {
+            resolvedSortDirection = sortDir === 'asc' ? 'ASC' : 'DESC';
+        }
+        else {
+            resolvedSortDirection = dataGridQuery.sortDirection;
+        }
+        return JSON.stringify({
+            ...dataGridQuery,
+            filters: appliedSearchQuery
+                ? { [searchKey]: appliedSearchQuery, ...dataGridQuery.filters }
+                : dataGridQuery.filters,
+            sortBy: sortBy ?? dataGridQuery.sortBy,
+            sortDirection: resolvedSortDirection,
+            page: currentPage,
+            size: itemsPerPage,
+        });
+    }, [dataGridQuery, appliedSearchQuery, searchKey, sortBy, sortDir, currentPage, itemsPerPage]);
+    // Use SWR for data fetching
+    const { data: response, error, mutate, } = usePaginatedApiSWR([url, queryParams], {
+        method: 'POST',
+        body: queryParams,
+    });
+    const tableData = response?.content ?? [];
+    const totalItems = response?.totalElements ?? 0;
+    const totalPages = response?.totalPages ?? 0;
+    const handleRetry = useCallback(() => {
+        mutate().then();
+    }, [mutate]);
+    const handleSort = useCallback((sortKey, sortDirection) => {
+        setSortBy(sortKey);
+        setSortDir(sortDirection);
+        setCurrentPage(0);
+    }, []);
+    const handleSearch = (e) => {
+        setSearchQuery(e.target.value);
+    };
+    const handleSearchTable = () => {
+        setAppliedSearchQuery(searchQuery);
+        setCurrentPage(0);
+    };
+    const handlePageChange = (page) => {
+        setCurrentPage(page);
+    };
+    const handleItemsPerPageChange = useCallback((pageIndex, pageSize) => {
+        setItemsPerPage(pageSize);
+        setCurrentPage(0);
+    }, []);
+    const handleClearFilters = useCallback(() => {
+        setSearchQuery('');
+        setAppliedSearchQuery('');
+        setCurrentPage(0);
+        setSortBy(undefined);
+        setSortDir(undefined);
+    }, []);
+    const sortConfig = sortBy ? { sortBy, sortDir: sortDir } : defaultSortByData;
+    const renderContent = () => {
+        if (error) {
+            return _jsx(ErrorState, { error: error, onRetry: handleRetry });
+        }
+        return (_jsx("div", { className: "mt-[19px]", children: _jsx(PagamioTable, { columns: enhancedColumns, data: tableData, addButton: false, rowCount: totalItems, searctInputPlaceHolder: searchInputPlaceHolder, pagination: {
+                    enabled: true,
+                    pageIndex: currentPage,
+                    totalPages: totalPages,
+                    onPageChange: handlePageChange,
+                    pageSize: itemsPerPage,
+                    itemsPerPage,
+                    itemsPerPageOptions: [10, 20, 50],
+                    onPaginationChange: handleItemsPerPageChange,
+                }, sorting: {
+                    multiSorting: false,
+                    sortConfig: sortConfig,
+                    onSort: handleSort,
+                }, search: {
+                    enabled: true,
+                    searchQuery,
+                    onSearch: handleSearch,
+                }, handleSearchTable: handleSearchTable, onClearFilters: handleClearFilters, sortable: true, showApplyFilterButton: true, enableManualSorting: true, enableManualPagination: true, enablePagination: true, showClearFilters: true, exportable: true, enableGlobalFilters: false }) }));
+    };
+    return _jsx(Card, { title: title, children: renderContent() });
+};
+export default DataGrid;

package/lib/dashboard-visuals/components/molecules/NoChartData.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+interface NoChartDataProps {
+    onSwitchToTable?: () => void;
+}
+declare const NoChartData: FC<NoChartDataProps>;
+export default NoChartData;

package/lib/dashboard-visuals/components/molecules/NoChartData.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiChartPie, HiInformationCircle, HiTable } from 'react-icons/hi';
+const NoChartData = ({ onSwitchToTable }) => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-[60vh] p-6 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "relative mb-4", children: [_jsx(HiChartPie, { className: "w-16 h-16 text-gray-300" }), _jsx("div", { className: "absolute -top-1 -right-1", children: _jsx(HiInformationCircle, { className: "w-6 h-6 text-blue-500" }) })] }), _jsx("h3", { className: "text-xl font-semibold text-gray-700 mb-2", children: "Chart Visualization Unavailable" }), _jsx("p", { className: "text-gray-600 text-center max-w-md mb-6", children: "The chart visualization is not available for this dataset. You can still view and analyze the data in table format." }), onSwitchToTable && (_jsxs("button", { onClick: onSwitchToTable, className: "flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg \n                    hover:bg-blue-600 transition-colors duration-200 shadow-sm", children: [_jsx(HiTable, { className: "w-5 h-5" }), _jsx("span", { children: "View Data Table" })] })), _jsx("div", { className: "mt-8 p-4 bg-blue-50 rounded-lg max-w-md", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(HiInformationCircle, { className: "w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-blue-700", children: [_jsx("p", { className: "font-medium mb-1", children: "Why might chart data be unavailable?" }), _jsxs("ul", { className: "list-disc list-inside space-y-1 ml-2", children: [_jsx("li", { children: "The dataset is too large to be properly rendered for chart visualization" }), _jsx("li", { children: "The dataset structure doesn't support chart visualization" }), _jsx("li", { children: "The required data fields for charting are missing" }), _jsx("li", { children: "The data format is incompatible with chart rendering" })] })] })] }) })] }));
+};
+export default NoChartData;

package/lib/dashboard-visuals/components/molecules/VisualChart.d.ts

@@ -0,0 +1,16 @@
+import type { ApiErrorResponse } from '../../../api';
+import type { ChartOptionsProps } from '../../types';
+interface VisualChartProps<T> {
+    topFivePerformingChartTitle?: string;
+    bottomFivePerformingChartTitle?: string;
+    isEmpty: boolean;
+    loading: boolean;
+    refresh: () => void;
+    error?: ApiErrorResponse;
+    chartData?: ChartOptionsProps<T>;
+    top5PerformingItems?: ChartOptionsProps<unknown>;
+    bottom5NonPerformingItems?: ChartOptionsProps<unknown>;
+    renderChart: boolean;
+}
+declare const VisualChart: <T>({ topFivePerformingChartTitle, bottomFivePerformingChartTitle, isEmpty, loading, refresh, error, chartData, top5PerformingItems, bottom5NonPerformingItems, renderChart, }: VisualChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default VisualChart;

package/lib/dashboard-visuals/components/molecules/VisualChart.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import Card from '../CardWrapper';
+import ChartWrapper from '../ChartWrapper';
+const VisualChart = ({ topFivePerformingChartTitle, bottomFivePerformingChartTitle, isEmpty, loading, refresh, error, chartData, top5PerformingItems, bottom5NonPerformingItems, renderChart, }) => {
+    return (_jsx(_Fragment, { children: renderChart ? (_jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: chartData, style: { height: '100%', width: '100%' }, className: "w-full h-full" }) }) }) })) : (_jsxs("div", { className: "flex gap-5 mb-5", children: [_jsx("div", { className: "w-1/2", children: _jsx(Card, { title: topFivePerformingChartTitle ?? 'Top 5 Performing Items', children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: top5PerformingItems, style: { height: '100%', width: '100%' }, className: "w-full h-full", opts: { renderer: 'canvas' }, notMerge: true }) }) }) }) }) }), _jsx("div", { className: "w-1/2", children: _jsx(Card, { title: bottomFivePerformingChartTitle ?? 'Bottom 5 Performing Items', children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: bottom5NonPerformingItems, style: { height: '100%', width: '100%' }, className: "w-full h-full" }) }) }) }) }) })] })) }));
+};
+export default VisualChart;

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

@@ -0,0 +1,62 @@
+import { type MRT_ColumnDef, type MRT_TableOptions, type MRT_TableState } from 'mantine-react-table';
+import { type Row } from 'react-table';
+import type React from 'react';
+export interface ExtendedMRTColumnDef<TData extends Record<string, any>> extends MRT_ColumnDef<TData> {
+    /** Enable click to copy for this column */
+    enableCopy?: boolean;
+    formattedCellElement?: (value: string | number | TData) => React.ReactNode;
+}
+export interface ReusableTableProps<TData extends Record<string, any>> {
+    /** Table column definitions */
+    columns: ExtendedMRTColumnDef<TData>[];
+    /** Data to be displayed in the table */
+    data: TData[];
+    /** Optional title for the table */
+    title?: string;
+    /** Initial state options for the table */
+    initialState?: Partial<MRT_TableState<TData>>;
+    /** Enable or disable global search */
+    enableGlobalSearch?: boolean;
+    /** Enable or disable column-specific filters */
+    enableColumnFilters?: boolean;
+    /** Enable or disable sorting */
+    enableSorting?: boolean;
+    /** Enable or disable pagination */
+    enablePagination?: boolean;
+    /** Enable or disable row selection */
+    enableRowSelection?: boolean;
+    /** Enable or disable column reordering */
+    enableColumnReordering?: boolean;
+    /** Enable or disable sticky header */
+    enableStickyHeader?: boolean;
+    /** Callback when a row is clicked */
+    onRowClick?: (row: Row<TData>, event: React.MouseEvent) => void;
+    /** Additional table options */
+    tableOptions?: Partial<MRT_TableOptions<TData>>;
+}
+export interface TableData {
+    [key: string]: any;
+}
+export interface FilterConfig {
+    name: string;
+    placeholder?: string;
+    label: string;
+    type: string;
+    options: any;
+    valueKey?: string;
+    url?: string;
+    tourUrl?: string;
+    query?: any;
+    multi?: boolean;
+}
+export interface Visual {
+    type: string;
+    dataKey?: string;
+    title?: string;
+    columns?: any[];
+}
+export interface Section {
+    title?: string;
+    layout: string;
+    visuals: Visual[];
+}

package/lib/dashboard-visuals/components/types.js

@@ -0,0 +1 @@
+export {};

package/lib/dashboard-visuals/hooks/useChartData.d.ts

@@ -0,0 +1,15 @@
+import type { QueryProps } from '../../shared/types';
+import type { MetricData } from '../types';
+/**
+ * Hook for fetching chart data with optimized caching to reduce server load
+ * @template T The data type to be returned from the API
+ * @template TransformReturnType The type after transformation
+ */
+export declare const useChartData: <T = MetricData[], TransformReturnType = T>(url: string, query: QueryProps, transform?: (data: T) => TransformReturnType) => {
+    data: T | TransformReturnType | undefined;
+    error: import("../../api").ApiErrorResponse | undefined;
+    loading: boolean;
+    isEmpty: boolean;
+    refresh: () => Promise<any>;
+    lastRefreshed: Date | undefined;
+};

package/lib/dashboard-visuals/hooks/useChartData.js

@@ -0,0 +1,82 @@
+import { isEqual } from 'lodash';
+import { useCallback, useEffect, useRef } from 'react';
+import { useApiSWRWithMutation } from '../../api';
+// Constants for cache control
+const CACHE_EXPIRY_TIME = 5 * 60 * 1000; // 5 minutes in milliseconds
+/**
+ * Hook for fetching chart data with optimized caching to reduce server load
+ * @template T The data type to be returned from the API
+ * @template TransformReturnType The type after transformation
+ */
+export const useChartData = (url, query, transform) => {
+    // Keep a reference to the last data received to compare with new data
+    const lastDataRef = useRef(null);
+    const lastFetchTimeRef = useRef(null);
+    // Custom comparison function to determine if data has changed
+    const isDataEqual = useCallback((a, b) => {
+        return isEqual(a, b);
+    }, []);
+    // Custom cache comparison function for SWR to determine if data needs to be revalidated
+    const compareCache = useCallback((cachedData, newData) => {
+        const areEqual = isDataEqual(cachedData, newData);
+        return areEqual;
+    }, [isDataEqual]);
+    const { data, error, isLoading: loading, refresh, } = useApiSWRWithMutation([url, query], {
+        // Explicitly disable automatic polling/refreshing
+        refreshInterval: 0,
+        refreshWhenHidden: false,
+        refreshWhenOffline: false,
+        // Only revalidate on initial mount
+        revalidateOnMount: true,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        revalidateIfStale: false,
+        // Set a long dedupe interval to prevent frequent requests for the same resource
+        dedupingInterval: 300000, // 5 minutes
+        method: 'POST',
+        body: JSON.stringify(query),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        // Use SWR's compare function to avoid unnecessary renders and revalidations
+        compare: compareCache,
+        // Keep previous data while fetching new data
+        keepPreviousData: true,
+        // Handle successful responses and update cache metadata
+        onSuccess: (data) => {
+            // Store the data for comparison
+            lastDataRef.current = data;
+            lastFetchTimeRef.current = Date.now();
+        },
+    });
+    // Effect to update last fetch time when data changes
+    useEffect(() => {
+        if (data) {
+            lastDataRef.current = data;
+            lastFetchTimeRef.current = Date.now();
+        }
+    }, [data]);
+    const transformedData = transform ? transform(data) : data;
+    const isEmpty = !error && !loading && Array.isArray(transformedData) ? !transformedData.length : transformedData === undefined;
+    // Enhanced refresh function that uses intelligent caching without custom headers
+    const smartRefresh = useCallback(() => {
+        // Check if cache is still fresh (< 5 minutes old)
+        const now = Date.now();
+        const lastFetchTime = lastFetchTimeRef.current;
+        // If data was fetched less than 5 minutes ago, don't refresh
+        if (lastFetchTime && now - lastFetchTime < CACHE_EXPIRY_TIME) {
+            // Return a promise that resolves immediately to match the refresh API
+            return Promise.resolve();
+        }
+        // Otherwise, trigger a revalidation (standard SWR refresh, no custom headers)
+        return refresh();
+    }, [refresh]);
+    return {
+        data: transformedData,
+        error,
+        loading,
+        isEmpty,
+        refresh: smartRefresh,
+        lastRefreshed: lastFetchTimeRef.current ? new Date(lastFetchTimeRef.current) : undefined,
+    };
+};

package/lib/dashboard-visuals/hooks/useTooltipFormatter.d.ts

@@ -0,0 +1,13 @@
+import type { MetricData, TooltipField } from '../types';
+export declare function useTooltipFormatter(tooltipValueFormat: string, tooltipTitle: string, tooltipUnit: string, tooltipAdditionalFields: (string | TooltipField)[], metricData: MetricData[], displaySymbol?: string): {
+    processedTooltipFields: {
+        toolTipkey: string;
+        valueKey: string;
+        nameKey: string;
+        label: string;
+        suffix: string;
+        format: string;
+        formatter: (value: any, currency?: string, displaySymbol?: string) => string;
+    }[];
+    tooltipFormatterFn: (params: any) => string;
+};

package/lib/dashboard-visuals/hooks/useTooltipFormatter.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { createTooltipFormatter, processTooltipFields } from '../utils/tooltipUtils';
+export function useTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, metricData, displaySymbol) {
+    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
+    const tooltipFormatterFn = useMemo(() => {
+        const currency = metricData?.[0]?.currency;
+        return createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, metricData, currency, displaySymbol);
+    }, [tooltipTitle, tooltipUnit, processedTooltipFields, metricData, tooltipValueFormat, displaySymbol]);
+    return { processedTooltipFields, tooltipFormatterFn };
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { FilterConfig } from './components/types';
+type FilterValue = string | string[] | Date | null;
+interface Config {
+    title: string;
+    summary: string;
+    filters: FilterConfig[];
+    tourFilters?: FilterConfig[];
+    themeColor?: string;
+}
+export interface MetricsDataProps {
+    id: number;
+    gridColSpan?: number;
+    metricData: any;
+}
+export interface VisualDataProps {
+    id: number;
+    sectionTitle: string;
+    data: MetricsDataProps[];
+}
+interface DashboardWrapperProps {
+    data: {
+        config: Config;
+        visualData: VisualDataProps[];
+        eventsVisualData?: VisualDataProps[];
+    };
+    showVisualHeader?: boolean;
+    showEventsTabbedLayout?: boolean;
+    handleFilterChange?: (name: string, value: FilterValue) => void;
+    handleTourFilterChange?: (name: string, value: FilterValue) => void;
+    selectedFilters?: Record<string, FilterValue>;
+    tourSelectedFilters?: Record<string, FilterValue>;
+    resetFilters?: () => void;
+    handleApplyFilters?: () => void;
+    handleApplyTourFilters?: () => void;
+}
+declare const DashboardWrapper: React.FC<DashboardWrapperProps>;
+export default DashboardWrapper;
+export type { DashboardWrapperProps };

package/lib/dashboard-visuals/index.js

@@ -0,0 +1,168 @@
+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 { useApi } from '../api';
+import { FilterComponent, Tab } from '../components';
+import { useMediaQueries } from '../shared';
+import ErrorState from './components/ErrorState';
+import FilterComponentSkeleton from './components/FilterComponentSkeleton';
+import { DashboardPaths, getFilterOptionsData, getGridColProps } from './utils';
+import componentRegistry from './visualRegistry';
+const OverviewContent = ({ visualData, renderContent, renderVisual }) => {
+    return (_jsxs(_Fragment, { children: [renderContent(), _jsx("main", { children: visualData.map((section) => (_jsxs("div", { className: "mb-2", children: [section.sectionTitle && _jsx("h2", { className: "mb-2 text-1xl font-semibold", children: section.sectionTitle }), _jsx(Grid, { gutter: "md", align: "stretch", className: "mb-[6px]", children: section.data.map((visual) => {
+                                const numVisuals = section.data.length;
+                                const { span, offset } = getGridColProps(numVisuals, visual.id);
+                                return renderVisual(visual, visual.id, section.sectionTitle, visual?.gridColSpan ?? span, offset);
+                            }) })] }, section.id))) })] }));
+};
+const EventsContent = ({ eventsVisualData, renderContent, renderVisual }) => {
+    return (_jsxs(_Fragment, { children: [renderContent(), _jsx("main", { children: eventsVisualData
+                    ? eventsVisualData.map((section) => (_jsxs("div", { className: "mb-2", children: [section.sectionTitle && _jsx("h2", { className: "mb-2 text-1xl font-semibold", children: section.sectionTitle }), _jsx(Grid, { gutter: "md", align: "stretch", className: "mb-[6px]", children: section.data.map((visual) => {
+                                    const numVisuals = section.data.length;
+                                    const { span, offset } = getGridColProps(numVisuals, visual.id);
+                                    return renderVisual(visual, visual.id, section.sectionTitle, visual?.gridColSpan ?? span, offset);
+                                }) })] }, section.id)))
+                    : null })] }));
+};
+const renderFilterComponent = ({ isLoading, error, filters, filterOptions, selectedFilters, handleFilterChange, handleApplyFilters, resetFilters, handleRetry, isNarrow, }) => {
+    if (isLoading) {
+        return _jsx(FilterComponentSkeleton, {});
+    }
+    if (error) {
+        return (_jsx(Card, { className: "mb-5", children: _jsx(ErrorState, { error: error, onRetry: handleRetry }) }));
+    }
+    return (_jsx(FilterComponent, { filters: filters.map((filter) => ({
+            name: filter.name,
+            placeholder: filter.placeholder ?? `Select ${filter.name}`,
+            type: filter.multi ? 'multi-select' : 'select',
+            options: filterOptions[filter.name] || filter.options,
+        })), 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 = () => { }, }) => {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [tourError, setTourError] = useState(null);
+    const [isRefreshOpttonsQuery, setIsRefreshOpttonsQuery] = useState(0);
+    const [filterOptions, setFilterOptions] = useState({});
+    const [tourFilterOptions, setTourFilterOptions] = useState({});
+    const { isSm, isXs } = useMediaQueries();
+    const apiClient = useApi();
+    const { config, visualData, eventsVisualData } = data;
+    const defaultTabIndex = 0;
+    const fetchFilterData = async (key, valueKey, url, query, isTourFilter = false) => {
+        try {
+            setLoading(true);
+            if (isTourFilter) {
+                setTourError(null);
+            }
+            else {
+                setError(null);
+            }
+            const response = await apiClient.post(url, query);
+            if (response) {
+                const { optionsData } = getFilterOptionsData(response, key, valueKey);
+                if (isTourFilter) {
+                    setTourFilterOptions((prev) => ({ ...prev, [key]: optionsData }));
+                }
+                else {
+                    setFilterOptions((prev) => ({ ...prev, [key]: optionsData }));
+                }
+            }
+        }
+        catch (err) {
+            const errorMessage = 'Failed to fetch metric filter data';
+            if (isTourFilter) {
+                setTourError(err instanceof Error ? err : new Error(errorMessage));
+            }
+            else {
+                setError(err instanceof Error ? err : new Error(errorMessage));
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        const fetchFilters = (filters, isTour = false) => {
+            filters.forEach((filter) => {
+                if (filter.query) {
+                    const queryUrl = isTour ? (filter.tourUrl ?? DashboardPaths.QUERY) : (filter.url ?? DashboardPaths.QUERY);
+                    fetchFilterData(filter.name, filter.valueKey, queryUrl, filter.query, isTour);
+                }
+            });
+        };
+        fetchFilters(config.filters);
+        if (config.tourFilters) {
+            fetchFilters(config.tourFilters, true);
+        }
+    }, [config.filters, isRefreshOpttonsQuery]);
+    const handleRetry = () => {
+        setIsRefreshOpttonsQuery((prev) => prev + 1);
+    };
+    const renderTourFilter = () => {
+        return renderFilterComponent({
+            isLoading: loading,
+            error: tourError,
+            filters: config.tourFilters || [],
+            filterOptions: tourFilterOptions,
+            selectedFilters: tourSelectedFilters,
+            handleFilterChange: handleTourFilterChange,
+            handleApplyFilters: handleApplyTourFilters,
+            resetFilters,
+            handleRetry,
+            isNarrow: isSm,
+        });
+    };
+    const renderContent = () => {
+        return renderFilterComponent({
+            isLoading: loading,
+            error,
+            filters: config.filters,
+            filterOptions,
+            selectedFilters,
+            handleFilterChange,
+            handleApplyFilters,
+            resetFilters,
+            handleRetry,
+            isNarrow: isSm,
+        });
+    };
+    const renderVisual = useCallback((visual, index, sectionTitle, span, offset) => {
+        const { metricData } = visual;
+        const matchesSmall = isXs || isSm;
+        const VisualComponent = componentRegistry[metricData.type];
+        if (!VisualComponent) {
+            console.error(`Visual type "${metricData.type}" not recognized in section "${sectionTitle}" at visual index ${index}.`);
+            return null;
+        }
+        const props = {
+            data: metricData.data,
+            options: metricData.options,
+            title: metricData.title,
+            label: metricData.label,
+            colors: metricData.colors,
+            columns: metricData.columns,
+            format: metricData.format,
+            stacked: metricData.stacked ?? undefined,
+            themeColor: config.themeColor,
+            currencyDisplaySymbol: metricData.currencyDisplaySymbol,
+            ...metricData,
+        };
+        return (_jsx(Grid.Col, { span: matchesSmall ? 12 : span, offset: offset, children: _jsx(VisualComponent, { ...props }) }, `visual-${visual.id}`));
+    }, [config.themeColor, isXs, isSm]);
+    const tabs = [
+        {
+            id: 1,
+            title: 'Overview',
+            content: _jsx(OverviewContent, { visualData: visualData, renderContent: renderContent, renderVisual: renderVisual }),
+        },
+        {
+            id: 2,
+            title: 'Tour',
+            content: (_jsx(EventsContent, { eventsVisualData: eventsVisualData, renderContent: renderTourFilter, renderVisual: renderVisual })),
+        },
+    ];
+    return (_jsxs("div", { children: [showVisualHeader && (_jsxs("div", { className: "mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: config.title }), _jsx("p", { className: "text-1xl text-gray-600", children: config.summary })] })), showEventsTabbedLayout ? (_jsx(Tab, { tabs: tabs, defaultTab: defaultTabIndex, className: "justify-end" })) : (_jsx(OverviewContent, { visualData: visualData, renderContent: renderContent, renderVisual: renderVisual }))] }));
+};
+export default DashboardWrapper;