@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/dashboard-visuals/visuals/Table.js

@@ -0,0 +1,113 @@
+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 Card from '../components/CardWrapper';
+import ErrorState from '../components/ErrorState';
+import TileSkeleton from '../components/TileSkeleton';
+import { DashboardPaths } from '../utils';
+const DataTable = ({ columns, title, searchKey, url = DashboardPaths.PAGED, query, searctInputPlaceHolder, expandable = false, renderExpandableComponent, }) => {
+    const [sortState, setSortState] = useState({});
+    const [searchQuery, setSearchQuery] = useState('');
+    const [appliedSearchQuery, setAppliedSearchQuery] = useState('');
+    const [currentPage, setCurrentPage] = useState(0);
+    const [itemsPerPage, setItemsPerPage] = useState(10);
+    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(() => {
+        const resolvedSortDirection = sortState.sortDir ? sortState.sortDir.toUpperCase() : query.sortDirection;
+        return JSON.stringify({
+            ...query,
+            filters: appliedSearchQuery ? { [searchKey]: appliedSearchQuery, ...query.filters } : query.filters,
+            sortBy: sortState.sortBy ?? query.sortBy,
+            sortDirection: resolvedSortDirection,
+            page: currentPage,
+            size: itemsPerPage,
+        });
+    }, [query, appliedSearchQuery, searchKey, sortState, currentPage, itemsPerPage]);
+    const { data: response, error, isValidating: loading, 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) => {
+        setSortState({ sortBy: sortKey, sortDir: 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);
+        setSortState({});
+    }, []);
+    const sortConfig = sortState.sortBy
+        ? { sortBy: sortState.sortBy, sortDir: sortState.sortDir ?? 'asc' }
+        : { sortBy: 'asc' };
+    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: searctInputPlaceHolder, 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, expandable: expandable, renderExpandableComponent: renderExpandableComponent }) }));
+    };
+    return _jsx(Card, { title: title, children: loading ? _jsx(TileSkeleton, {}) : renderContent() });
+};
+export default DataTable;

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

@@ -0,0 +1,16 @@
+import type { QueryProps } from 'src/shared/types';
+import React from 'react';
+interface TileProps {
+    title?: string;
+    format?: string;
+    url?: string;
+    valueKey: string;
+    previousValueKey: string;
+    changeKey: string;
+    details?: any[];
+    query: QueryProps;
+    currency?: string;
+    currencyDisplaySymbol?: string;
+}
+declare const Tile: React.FC<TileProps>;
+export default Tile;

package/lib/dashboard-visuals/visuals/Tile.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatPrice } from '../../helpers';
+import Card from '../components/CardWrapper';
+import ChartWrapper from '../components/ChartWrapper';
+import { useChartData } from '../hooks/useChartData';
+import { DashboardPaths, formatValue } from '../utils';
+const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
+    const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
+    // Safe default values
+    const value = data?.[valueKey] ?? 0;
+    const currency = propCurrency || data?.additionalData?.currency || undefined;
+    return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading && !data, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "flex justify-between", style: { height: '50px' }, children: _jsx("div", { className: "text-xl font-400", children: currency
+                        ? formatPrice(Number(value.toFixed(2)), currency, 2, undefined, currencyDisplaySymbol)
+                        : formatValue(Number(value.toFixed(2)), 'number') }) }) }) }));
+};
+export default Tile;

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

@@ -0,0 +1,25 @@
+import type { QueryProps } from 'src/shared/types';
+import type { TooltipField } from '../types';
+import type { MetricDetailData } from '../types/metricDetailData';
+interface TreeMapProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    colors?: string[];
+    chartDetails?: any;
+    url?: string;
+    query: QueryProps;
+    nameKey: string;
+    valueKey: string;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    currencyDisplaySymbol?: string;
+    metricDetailData: MetricDetailData<TData>;
+    showDetailsModal?: boolean;
+}
+declare const TreeMap: <TData extends {
+    id: string | number;
+}>({ title, chartDetails, url, query, nameKey, valueKey, colors, tooltipTitle, tooltipValueFormat, tooltipUnit, tooltipAdditionalFields, metricDetailData, showDetailsModal, ...props }: TreeMapProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default TreeMap;

package/lib/dashboard-visuals/visuals/TreeMap.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useCallback } from 'react';
+import BaseChart from '../components/BaseChart';
+import { DashboardPaths, defaultColors, getSeriesData } from '../utils';
+const TreeMap = ({ title, chartDetails, url = DashboardPaths.QUERY, query, nameKey, valueKey, colors, tooltipTitle = 'Value', tooltipValueFormat, tooltipUnit = '', tooltipAdditionalFields = [], metricDetailData, showDetailsModal = true, ...props }) => {
+    const formatChartData = useCallback((data) => {
+        if (data && data.length > 0) {
+            const { seriesData } = getSeriesData(data, nameKey, valueKey);
+            return { seriesData };
+        }
+        return { seriesData: [] };
+    }, [nameKey, valueKey]);
+    const createChartOptions = useCallback((data) => {
+        const { seriesData } = formatChartData(data);
+        return {
+            tooltip: {
+                trigger: 'item',
+                formatter: undefined,
+            },
+            color: colors || defaultColors,
+            series: [
+                {
+                    name: title,
+                    type: 'treemap',
+                    data: seriesData,
+                    label: {
+                        show: true,
+                        formatter: '{b}',
+                    },
+                    roam: false,
+                },
+            ],
+        };
+    }, [colors, title, formatChartData]);
+    return (_jsx(BaseChart, { detailsModalTitle: metricDetailData.title, url: url, query: query, chartDetails: chartDetails, getChartOptions: createChartOptions, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, showDetailsModal: showDetailsModal, ...metricDetailData, ...props, children: ({ metricData, tooltipFormatterFn }) => {
+            const options = createChartOptions(metricData);
+            // Add tooltip formatter from BaseChart
+            if (tooltipFormatterFn && options.tooltip) {
+                options.tooltip.formatter = tooltipFormatterFn;
+            }
+            return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: options, style: { height: '350px' } }) }));
+        } }));
+};
+export default TreeMap;

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

@@ -0,0 +1,52 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface WaterfallChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    colors?: {
+        positive: string;
+        negative: string;
+        total: string;
+    };
+    className?: string;
+    themeColor?: string;
+    url?: string;
+    query: QueryProps;
+    yAxisLabel: string;
+    xAxisLabel: string;
+    seriesDataValueKey: string;
+    xAxisDataValueKey: string;
+    chartToolTip: ChartToolTipProps;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    yAxisLabelFormatter?: (value: number) => string;
+    metricDetailData: {
+        title: string;
+        statisticsUrl?: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        detailsTableTitle?: string;
+        topFiveChartTitle?: string;
+        bottomFiveChartTitle?: string;
+        yAxisDataNameKey: string;
+        xAxisNameKey: string;
+        xAxisLabel: string;
+        yAxisLabel: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+    showDetailsModal?: boolean;
+}
+declare const WaterfallChart: <TData extends {
+    id: string | number;
+}>({ query, title, colors, className, url, xAxisDataValueKey, xAxisLabel, yAxisLabel, seriesDataValueKey, tooltipValueFormat, chartToolTip, tooltipTitle, tooltipUnit, tooltipAdditionalFields, yAxisLabelFormatter, metricDetailData, showDetailsModal, ...props }: WaterfallChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default WaterfallChart;

package/lib/dashboard-visuals/visuals/WaterfallChart.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useCallback, useMemo, useState } from 'react';
+import Card from '../components/CardWrapper';
+import ChartDetailsModal from '../components/ChartDetailsModal';
+import ChartWrapper from '../components/ChartWrapper';
+import { useChartData } from '../hooks/useChartData';
+import { useTooltipFormatter } from '../hooks/useTooltipFormatter';
+import { DashboardPaths } from '../utils';
+import { createDistributionMetricOptions } from '../utils/chartOptions';
+import { processTooltipFields } from '../utils/tooltipUtils';
+const useMetricStatistics = (url, statisticsUrl, query, metricDetailData) => {
+    // Get item Statistics Query data
+    const itemStats = useChartData(statisticsUrl, {
+        ...metricDetailData.itemStatisticsQuery.query,
+    });
+    // Get value Metrics Query data
+    const valueStats = useChartData(statisticsUrl, {
+        ...metricDetailData.valueMetricsQuery.query,
+    });
+    // Get average Metrics Query data
+    const averageStats = useChartData(statisticsUrl, {
+        ...metricDetailData.averageMetricsQuery.query,
+    });
+    // Get full data
+    const fullData = useChartData(url, {
+        ...query,
+        limit: undefined,
+    });
+    // Get distribution Metrics Query data
+    const distributionStats = useChartData(url, {
+        ...metricDetailData.distributionMetricsQuery.query,
+    });
+    return {
+        itemStats,
+        valueStats,
+        averageStats,
+        fullData,
+        distributionStats,
+    };
+};
+const createWaterfallData = (data, xAxisDataValueKey, seriesDataValueKey, colors, processedTooltipFields) => {
+    if (!data?.length)
+        return [];
+    let runningTotal = 0;
+    const processedData = data.map((item) => {
+        const start = runningTotal;
+        runningTotal += item[seriesDataValueKey];
+        // Add tooltip fields to data
+        const tooltipData = {};
+        processedTooltipFields.forEach((field) => {
+            if (item[field.toolTipkey] !== undefined) {
+                tooltipData[field.toolTipkey] = item[field.toolTipkey];
+            }
+        });
+        return {
+            name: item[xAxisDataValueKey],
+            value: item[seriesDataValueKey],
+            itemStyle: {
+                color: item[seriesDataValueKey] >= 0 ? colors.positive : colors.negative,
+            },
+            start,
+            end: runningTotal,
+            ...tooltipData, // Include tooltip data
+        };
+    });
+    // Add total bar
+    processedData.push({
+        name: 'Total',
+        value: runningTotal,
+        itemStyle: {
+            color: colors.total,
+        },
+        start: 0,
+        end: runningTotal,
+    });
+    return processedData;
+};
+const createBaseChartOptions = (data, { title, colors, xAxisLabel, yAxisLabel, xAxisDataValueKey, seriesDataValueKey, tooltipFormatter, chartToolTip, yAxisLabelFormatter, }) => {
+    const processedData = createWaterfallData(data, xAxisDataValueKey, seriesDataValueKey, colors, []);
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' },
+            ...chartToolTip,
+            formatter: tooltipFormatter,
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: title ? '60' : '3%',
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            name: xAxisLabel,
+            data: processedData.map((item) => item.name),
+            axisLabel: {
+                interval: 0,
+                rotate: 30,
+            },
+        },
+        yAxis: {
+            type: 'value',
+            name: yAxisLabel,
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                },
+            },
+            ...(yAxisLabelFormatter && {
+                axisLabel: {
+                    formatter: yAxisLabelFormatter,
+                },
+            }),
+        },
+        series: [
+            {
+                type: 'bar',
+                stack: 'waterfall',
+                data: processedData.map((item) => ({
+                    value: item.value,
+                    itemStyle: item.itemStyle,
+                })),
+                label: {
+                    show: false,
+                    position: 'top',
+                },
+            },
+        ],
+        animation: true,
+        animationDuration: 1000,
+        animationEasing: 'cubicInOut',
+    };
+};
+const WaterfallChart = ({ query, title, colors = {
+    positive: '#34D399', // green-400
+    negative: '#F87171', // red-400
+    total: '#60A5FA', // blue-400
+}, className = '', url = DashboardPaths.QUERY, xAxisDataValueKey, xAxisLabel = '', yAxisLabel = '', seriesDataValueKey, tooltipValueFormat, chartToolTip, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], yAxisLabelFormatter, metricDetailData, showDetailsModal = true, ...props }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    const statisticsUrl = metricDetailData?.statisticsUrl ?? DashboardPaths.METRICS;
+    const { itemStats, valueStats, averageStats, fullData, distributionStats } = useMetricStatistics(url, statisticsUrl, query, metricDetailData);
+    // Replace duplicated tooltip formatter logic with hook
+    const { tooltipFormatterFn } = useTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, metricData);
+    const processedDistributionTooltipFields = useMemo(() => processTooltipFields(metricDetailData.distributionChartTooltip.tooltipAdditionalFields), [metricDetailData.distributionChartTooltip.tooltipAdditionalFields]);
+    const getChartOptions = useCallback((data, customTitle) => {
+        return createBaseChartOptions(data, {
+            title: customTitle ?? title,
+            colors,
+            xAxisLabel,
+            yAxisLabel,
+            xAxisDataValueKey,
+            seriesDataValueKey,
+            tooltipFormatter: tooltipFormatterFn,
+            chartToolTip,
+            yAxisLabelFormatter,
+        });
+    }, [
+        colors,
+        xAxisDataValueKey,
+        seriesDataValueKey,
+        tooltipFormatterFn,
+        chartToolTip,
+        title,
+        xAxisLabel,
+        yAxisLabel,
+        yAxisLabelFormatter,
+    ]);
+    const chartBarOptions = useMemo(() => getChartOptions(metricData), [getChartOptions, metricData]);
+    const fullChartOptions = useMemo(() => getChartOptions(fullData.data ?? []), [getChartOptions, fullData.data]);
+    const handleRefresh = useCallback((refreshFn) => {
+        return () => {
+            refreshFn().catch(() => { });
+        };
+    }, []);
+    const distributionMetricData = useMemo(() => {
+        return createDistributionMetricOptions({
+            distributionChartTooltip: metricDetailData.distributionChartTooltip,
+            distributionData: distributionStats.data ?? [],
+            processedTooltipFields: processedDistributionTooltipFields,
+            xAxisDataValueKey: metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+            seriesDataValueKey: metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        });
+    }, [
+        distributionStats.data,
+        metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+        metricDetailData.distributionChartTooltip,
+        processedDistributionTooltipFields,
+    ]);
+    const { topFiveItems, bottomFiveItems } = useMemo(() => {
+        if (!fullData.data || fullData.data.length === 0) {
+            return {
+                topFiveItems: [],
+                bottomFiveItems: [],
+            };
+        }
+        const topFiveMetric = fullData.data.slice(0, 5);
+        const bottomFiveMetric = fullData.data.slice(-5).reverse();
+        return {
+            topFiveItems: getChartOptions(topFiveMetric, metricDetailData.topFiveChartTitle),
+            bottomFiveItems: getChartOptions(bottomFiveMetric, metricDetailData.bottomFiveChartTitle),
+        };
+    }, [fullData.data, getChartOptions, metricDetailData]);
+    const itemMetricsData = {
+        value: itemStats.data?.[metricDetailData.itemStatisticsQuery.valueKey] ?? 0,
+        previousValue: metricDetailData.itemStatisticsQuery.previousValueKey
+            ? (itemStats.data?.[metricDetailData.itemStatisticsQuery.previousValueKey] ?? 0)
+            : undefined,
+        change: itemStats.data?.[metricDetailData.itemStatisticsQuery.changeKey] ?? 0,
+    };
+    const valueMetricsData = {
+        value: valueStats.data?.[metricDetailData.valueMetricsQuery.valueKey] ?? 0,
+        previousValue: metricDetailData.valueMetricsQuery.previousValueKey
+            ? (valueStats.data?.[metricDetailData.valueMetricsQuery.previousValueKey] ?? 0)
+            : undefined,
+        change: valueStats.data?.[metricDetailData.valueMetricsQuery.changeKey] ?? 0,
+    };
+    const averageMetricsData = {
+        value: averageStats.data?.[metricDetailData.averageMetricsQuery.valueKey] ?? 0,
+        previousValue: metricDetailData.averageMetricsQuery.previousValueKey
+            ? (averageStats.data?.[metricDetailData.averageMetricsQuery.previousValueKey] ?? 0)
+            : undefined,
+        change: averageStats.data?.[metricDetailData.averageMetricsQuery.changeKey] ?? 0,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: title, ...props, onOpenDetails: metricData ? () => setIsModalOpen(true) : undefined, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx(ReactECharts, { option: chartBarOptions, style: { height: '350px' } }) }) }) }), showDetailsModal && (_jsx(ChartDetailsModal, { title: metricDetailData.title, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), data: fullData.data ?? [], columns: metricDetailData.dataGridColumns, error: fullData.error, isEmpty: fullData.isEmpty, loading: fullData.loading, detailsTableTitle: metricDetailData.detailsTableTitle, refresh: fullData.refresh, renderDetailsChart: (fullData.data?.length ?? 0) <= 40, chartData: fullChartOptions, top5PerformingItems: topFiveItems, bottom5NonPerformingItems: bottomFiveItems, valueKey: metricDetailData.valueKey, dataGridQuery: query, searchKey: metricDetailData.dataGridSearchKey, searchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, itemMetricsData: {
+                    ...itemMetricsData,
+                    title: metricDetailData.itemStatisticsQuery.title,
+                    format: metricDetailData.itemStatisticsQuery.format,
+                    isEmpty: itemStats.isEmpty,
+                    loading: itemStats.loading,
+                    currency: itemStats.data?.additionalData?.currency,
+                    error: itemStats.error,
+                    refresh: handleRefresh(itemStats.refresh),
+                }, valueMetricsData: {
+                    ...valueMetricsData,
+                    title: metricDetailData.valueMetricsQuery.title,
+                    format: metricDetailData.valueMetricsQuery.format,
+                    isEmpty: valueStats.isEmpty,
+                    loading: valueStats.loading,
+                    currency: valueStats.data?.additionalData?.currency,
+                    error: valueStats.error,
+                    refresh: handleRefresh(valueStats.refresh),
+                }, averageMetricsData: {
+                    ...averageMetricsData,
+                    title: metricDetailData.averageMetricsQuery.title,
+                    format: metricDetailData.averageMetricsQuery.format,
+                    isEmpty: averageStats.isEmpty,
+                    loading: averageStats.loading,
+                    currency: averageStats.data?.additionalData?.currency,
+                    error: averageStats.error,
+                    refresh: handleRefresh(averageStats.refresh),
+                }, distributionMetricsData: {
+                    data: distributionMetricData ?? [],
+                    title: metricDetailData.distributionMetricsQuery.title,
+                    isEmpty: distributionStats.isEmpty,
+                    loading: distributionStats.loading,
+                    error: distributionStats.error,
+                    refresh: handleRefresh(distributionStats.refresh),
+                    chartToolTip,
+                } }))] }));
+};
+export default WaterfallChart;

package/lib/form-engine/Form.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FormProps } from './types';
+declare const FormEngineForm: React.FC<FormProps>;
+export default FormEngineForm;

package/lib/form-engine/Form.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import FormEngine from './FormEngine';
+import { setupInputRegistry } from './registry';
+const FormEngineForm = ({ fieldDefinitions, initialValues = {}, layout = 'vertical', isNotTrigger, showCancelButton, onFormSubmit = () => { }, onFormCancel = () => { }, }) => {
+    const handleSubmit = async (dto) => {
+        onFormSubmit(dto);
+    };
+    useEffect(() => {
+        setupInputRegistry();
+    }, []);
+    return (_jsx(FormEngine, { fields: fieldDefinitions, onSubmit: handleSubmit, layout: layout, initialValues: initialValues, isNotTrigger: isNotTrigger, showCancelButton: showCancelButton, onCancel: onFormCancel }));
+};
+export default FormEngineForm;

package/lib/form-engine/FormEngine.d.ts

@@ -0,0 +1,3 @@
+import type { FormEngineProps } from './types';
+declare const FormEngine: <T extends Record<string, any>>({ fields, onSubmit, initialValues, layout, isNotTrigger, showCancelButton, submitButtonText, showSubmittingText, submitButtonClass, onCancel, getFieldValues, formRef, className, persistenceKey, }: FormEngineProps<T>) => JSX.Element;
+export default FormEngine;