@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

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

@@ -0,0 +1,201 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// BaseChart.tsx
+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 { DashboardPaths, formatDonutChartData } from '../utils';
+import { getChartBarOptions, getLargeDatasetChartOptions } from '../utils/chartOptions';
+import { createTooltipFormatter, processTooltipFields } from '../utils/tooltipUtils';
+import { sortMetricData } from '../visuals/HorizontalBarChart';
+const BaseChart = ({ title, url = DashboardPaths.QUERY, query, chartDetails, children, detailsModalTitle, statisticsUrl = DashboardPaths.METRICS, itemStatisticsQuery, valueMetricsQuery, averageMetricsQuery, distributionMetricsQuery, yAxisDataNameKey, xAxisNameKey, xAxisLabel, yAxisLabel, nameKey, valueKey, dataGridSearchKey, dataGridColumns, dataSearchInputPlaceHolder, chartToolTip, detailsTableTitle, getChartOptions, tooltipValueFormat = 'value', tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], topFivePerformingChartTitle, bottomFivePerformingChartTitle, distributionChartTooltip, showDetailsModal = true, currencyDisplaySymbol, ...props }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    // Process tooltip fields
+    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
+    const processedDistributionTooltipFields = useMemo(() => processTooltipFields(distributionChartTooltip.tooltipAdditionalFields), [distributionChartTooltip.tooltipAdditionalFields]);
+    // Create tooltip formatter function
+    const tooltipFormatterFn = useMemo(() => {
+        // Use the currency from metricData, or fallback to a default
+        const currency = metricData?.[0]?.currency || 'ZAR';
+        return createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, metricData, currency, currencyDisplaySymbol);
+    }, [tooltipValueFormat, tooltipTitle, tooltipUnit, processedTooltipFields, metricData, currencyDisplaySymbol]);
+    // Get full data for detailed view
+    const { data: fullMetricData = [], error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, refresh: refreshFullMetricData, } = useChartData(url, {
+        ...query,
+        limit: undefined,
+    });
+    // Get item Statistics Query data for detailed view
+    const { data: itemStatData, error: itemStatDataError, isEmpty: isitemStatMetricDataEmpty, loading: isLoadingItemStatlMetricData, refresh: refreshItemStatMetricData, } = useChartData(statisticsUrl, {
+        ...itemStatisticsQuery.query,
+    });
+    // Get value Metrics Query data for detailed view
+    const { data: valueStatData, error: valueStatDataError, isEmpty: isValueStatMetricDataEmpty, loading: isLoadingValueStatlMetricData, refresh: refreshValueStatMetricData, } = useChartData(statisticsUrl, {
+        ...valueMetricsQuery.query,
+    });
+    // Get average Metrics Query data for detailed view
+    const { data: averageStatData, error: averageStatDataError, isEmpty: isAverageStatMetricDataEmpty, loading: isLoadingAverageStatlMetricData, refresh: refreshAverageStatMetricData, } = useChartData(statisticsUrl, {
+        ...averageMetricsQuery.query,
+    });
+    // Get distribution Metrics Query data for detailed view
+    const { data: distributionStatData, error: distributionStatDataError, isEmpty: isDistributionStatMetricDataEmpty, loading: isLoadingDistributionStatlMetricData, refresh: refreshDistributionStatMetricData, } = useChartData(url, {
+        ...distributionMetricsQuery.query,
+    });
+    const distributionMetricData = useMemo(() => {
+        const formattedData = formatDonutChartData(distributionStatData ?? [], distributionMetricsQuery.xAxisDataValueKey, distributionMetricsQuery.seriesDataValueKey);
+        const { tooltipValueFormat, tooltipTitle, tooltipUnit, treeMapSegmentLabel } = distributionChartTooltip;
+        const labelFormatter = (params) => {
+            const formattedValue = params.value.toLocaleString();
+            return `${params.name}\n${treeMapSegmentLabel}: ${formattedValue}`;
+        };
+        const tooltipFormatter = createTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, processedDistributionTooltipFields, distributionStatData ?? [], distributionStatData?.[0]?.currency, currencyDisplaySymbol);
+        const distributionMetricOptions = getLargeDatasetChartOptions({
+            data: formattedData,
+            labelFormatter,
+            tooltipFormatter,
+        });
+        return distributionMetricOptions;
+    }, [
+        distributionStatData,
+        distributionMetricsQuery.seriesDataValueKey,
+        distributionMetricsQuery.xAxisDataValueKey,
+        currencyDisplaySymbol,
+    ]);
+    const fullChartOptions = useMemo(() => {
+        const chartOptions = getChartOptions(fullMetricData);
+        return chartOptions;
+    }, [fullMetricData]);
+    const createChartOptions = useCallback((data, title, colorScheme, metricDetailData, tooltipConfig) => {
+        const currency = data?.[0]?.currency;
+        const formatterFn = tooltipConfig
+            ? createTooltipFormatter(tooltipValueFormat, tooltipConfig.tooltipTitle ?? tooltipTitle, tooltipConfig.tooltipUnit ?? tooltipUnit, tooltipConfig.tooltipFields ?? processedTooltipFields, tooltipConfig.data ?? data, currency, currencyDisplaySymbol)
+            : tooltipFormatterFn;
+        return getChartBarOptions({
+            title,
+            colorScheme,
+            yAxisDataNameKey: metricDetailData.yAxisDataNameKey,
+            xAxisNameKey: metricDetailData.xAxisNameKey,
+            xAxisLabel: metricDetailData.xAxisLabel,
+            yAxisLabel: metricDetailData.yAxisLabel,
+            chartToolTip: {
+                ...metricDetailData.chartToolTip,
+                formatter: formatterFn,
+            },
+            data,
+        });
+    }, [tooltipFormatterFn, tooltipTitle, tooltipUnit, processedTooltipFields]);
+    const createChartOptionsWithData = useCallback((data, tooltipConfig) => createChartOptions(data, title, ['#60A5FA', '#93C5FD'], {
+        yAxisDataNameKey,
+        xAxisNameKey,
+        xAxisLabel,
+        yAxisLabel,
+        chartToolTip,
+    }, tooltipConfig), [title, yAxisDataNameKey, xAxisNameKey, xAxisLabel, yAxisLabel, chartToolTip, createChartOptions]);
+    const sortedFullMetricData = useMemo(() => sortMetricData(fullMetricData, valueKey, 'desc'), [fullMetricData, valueKey]);
+    const { topFiveItems, bottomFiveItems } = useMemo(() => {
+        if (!sortedFullMetricData || sortedFullMetricData.length === 0) {
+            return {
+                topFiveItems: [],
+                bottomFiveItems: [],
+            };
+        }
+        const topFiveMetric = sortedFullMetricData.slice(0, 5);
+        const bottomFiveMetric = sortedFullMetricData.slice(-5).reverse();
+        return {
+            topFiveItems: createChartOptionsWithData(topFiveMetric, {
+                tooltipTitle: topFivePerformingChartTitle,
+                tooltipUnit,
+                tooltipFields: processedTooltipFields,
+                data: topFiveMetric,
+            }),
+            bottomFiveItems: createChartOptionsWithData(bottomFiveMetric, {
+                tooltipTitle: bottomFivePerformingChartTitle,
+                tooltipUnit,
+                tooltipFields: processedTooltipFields,
+                data: bottomFiveMetric,
+            }),
+        };
+    }, [
+        sortedFullMetricData,
+        createChartOptionsWithData,
+        tooltipUnit,
+        processedTooltipFields,
+        topFivePerformingChartTitle,
+        bottomFivePerformingChartTitle,
+    ]);
+    const itemMetricsData = {
+        value: itemStatData?.[itemStatisticsQuery.valueKey] ?? 0,
+        previousValue: itemStatisticsQuery.previousValueKey
+            ? (itemStatData?.[itemStatisticsQuery.previousValueKey] ?? 0)
+            : undefined,
+        change: itemStatData?.[itemStatisticsQuery.changeKey] ?? 0,
+        currency: itemStatData?.additionalData?.currency,
+    };
+    const valueMetricsData = {
+        value: valueStatData?.[valueMetricsQuery.valueKey] ?? 0,
+        previousValue: valueMetricsQuery.previousValueKey
+            ? (valueStatData?.[valueMetricsQuery.previousValueKey] ?? 0)
+            : undefined,
+        change: valueStatData?.[valueMetricsQuery.changeKey] ?? 0,
+        currency: valueStatData?.additionalData?.currency,
+    };
+    const averageMetricsData = {
+        value: averageStatData?.[averageMetricsQuery.valueKey] ?? 0,
+        previousValue: averageMetricsQuery.previousValueKey
+            ? (averageStatData?.[averageMetricsQuery.previousValueKey] ?? 0)
+            : undefined,
+        change: averageStatData?.[averageMetricsQuery.changeKey] ?? 0,
+        currency: averageStatData?.additionalData?.currency,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: title, ...props, onOpenDetails: metricData.length > 0 && showDetailsModal ? () => setIsModalOpen(true) : undefined, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: children({
+                        loading,
+                        error,
+                        isEmpty,
+                        refresh,
+                        metricData,
+                        tooltipFormatterFn,
+                        processedTooltipFields,
+                    }) }) }), showDetailsModal && (_jsx(ChartDetailsModal, { title: detailsModalTitle, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), data: fullMetricData, columns: dataGridColumns, error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, detailsTableTitle: detailsTableTitle, refresh: refreshFullMetricData, renderDetailsChart: fullMetricData.length <= 40, chartData: fullChartOptions, topFivePerformingChartTitle: topFivePerformingChartTitle, bottomFivePerformingChartTitle: bottomFivePerformingChartTitle, top5PerformingItems: topFiveItems, bottom5NonPerformingItems: bottomFiveItems, valueKey: valueKey, dataGridQuery: query, searchKey: dataGridSearchKey, searchInputPlaceHolder: dataSearchInputPlaceHolder, itemMetricsData: {
+                    ...itemMetricsData,
+                    title: itemStatisticsQuery.title,
+                    format: itemStatisticsQuery.format,
+                    isEmpty: isitemStatMetricDataEmpty,
+                    loading: isLoadingItemStatlMetricData,
+                    error: itemStatDataError,
+                    refresh: () => {
+                        refreshItemStatMetricData().catch(() => { });
+                    },
+                }, valueMetricsData: {
+                    ...valueMetricsData,
+                    title: valueMetricsQuery.title,
+                    format: valueMetricsQuery.format,
+                    isEmpty: isValueStatMetricDataEmpty,
+                    loading: isLoadingValueStatlMetricData,
+                    error: valueStatDataError,
+                    refresh: () => {
+                        refreshValueStatMetricData().catch(() => { });
+                    },
+                }, averageMetricsData: {
+                    ...averageMetricsData,
+                    title: averageMetricsQuery.title,
+                    format: averageMetricsQuery.format,
+                    isEmpty: isAverageStatMetricDataEmpty,
+                    loading: isLoadingAverageStatlMetricData,
+                    error: averageStatDataError,
+                    refresh: () => {
+                        refreshAverageStatMetricData().catch(() => { });
+                    },
+                }, distributionMetricsData: {
+                    data: distributionMetricData ?? [],
+                    title: distributionMetricsQuery.title,
+                    isEmpty: isDistributionStatMetricDataEmpty,
+                    loading: isLoadingDistributionStatlMetricData,
+                    error: distributionStatDataError,
+                    refresh: () => {
+                        refreshDistributionStatMetricData().catch(() => { });
+                    },
+                    chartToolTip: distributionMetricsQuery.chartToolTip,
+                } }))] }));
+};
+export default BaseChart;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CardProps {
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+    onOpenDetails?: () => void;
+    showDetailsModal?: boolean;
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
+import { Card as FlowbiteCard } from 'flowbite-react';
+const Card = ({ title, children, onOpenDetails, className, showDetailsModal = true }) => {
+    return (_jsxs(FlowbiteCard, { className: `relative w-full sm:w-auto ${className} border-b-4 border-b-primary-500`, style: {
+            height: '100%',
+        }, theme: {
+            root: {
+                children: 'p-3 gap-1',
+            },
+        }, children: [title && (_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("h3", { className: "text-[15px] text-bold font-medium", children: title }), onOpenDetails && showDetailsModal && (_jsx("button", { onClick: onOpenDetails, className: "text-gray-500 hover:text-gray-700 focus:outline-none", "aria-label": "Open in new window", children: _jsx(ExternalLinkIcon, { className: "h-5 w-5" }) }))] })), children] }));
+};
+export default Card;

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { ApiErrorResponse } from '../../api';
+import type { QueryProps } from '../../shared/types';
+import type { ChartOptionsProps, ChartToolTipProps } from '../types';
+export type ColumnProps = {
+    header: string;
+    accessor: string;
+};
+export type StatisticsMetricsProps = {
+    title: string;
+    format: string;
+    value: number;
+    previousValue?: number;
+    change: number;
+    isEmpty: boolean;
+    loading: boolean;
+    error?: ApiErrorResponse;
+    currency?: string;
+    refresh: () => void;
+};
+export type DistributionMetricsProps = {
+    title: string;
+    data: ChartOptionsProps<unknown>;
+    isEmpty: boolean;
+    loading: boolean;
+    error?: ApiErrorResponse;
+    refresh: () => void;
+    chartToolTip?: ChartToolTipProps;
+};
+interface DetailsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    error?: ApiErrorResponse;
+    isEmpty: boolean;
+    loading: boolean;
+    refresh: () => void;
+    data: any[];
+    columns: any[];
+    title?: string;
+    itemMetricsData: StatisticsMetricsProps;
+    valueMetricsData: StatisticsMetricsProps;
+    averageMetricsData: StatisticsMetricsProps;
+    distributionMetricsData: DistributionMetricsProps;
+    chartData: ChartOptionsProps<unknown>;
+    top5PerformingItems: ChartOptionsProps<unknown>;
+    bottom5NonPerformingItems: ChartOptionsProps<unknown>;
+    valueKey: string;
+    searchKey: string;
+    dataGridQuery: QueryProps;
+    searchInputPlaceHolder: string;
+    renderDetailsChart: boolean;
+    detailsTableTitle?: string;
+    topFivePerformingChartTitle?: string;
+    bottomFivePerformingChartTitle?: string;
+}
+declare const ChartDetailsModal: React.FC<DetailsModalProps>;
+export default ChartDetailsModal;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from 'flowbite-react';
+import { Tab } from '../../components';
+import Analytics from './molecules/Analytics';
+import DataGrid from './molecules/DataGrid';
+import VisualChart from './molecules/VisualChart';
+const ChartDetailsModal = ({ error, isEmpty, loading, refresh, isOpen, onClose, title, itemMetricsData, valueMetricsData, averageMetricsData, distributionMetricsData, data, columns, chartData, top5PerformingItems, bottom5NonPerformingItems, valueKey, searchKey, dataGridQuery, renderDetailsChart, searchInputPlaceHolder, detailsTableTitle, topFivePerformingChartTitle, bottomFivePerformingChartTitle, }) => {
+    const tabs = [
+        {
+            id: 1,
+            title: 'Visual Chart',
+            content: (_jsx(VisualChart, { loading: loading, error: error, isEmpty: isEmpty, refresh: refresh, chartData: chartData, top5PerformingItems: top5PerformingItems, bottom5NonPerformingItems: bottom5NonPerformingItems, renderChart: renderDetailsChart, topFivePerformingChartTitle: topFivePerformingChartTitle, bottomFivePerformingChartTitle: bottomFivePerformingChartTitle })),
+        },
+        {
+            id: 2,
+            title: 'Data Table',
+            content: (_jsx(DataGrid, { dataGridQuery: dataGridQuery, columns: columns, searchInputPlaceHolder: searchInputPlaceHolder, searchKey: searchKey, title: detailsTableTitle })),
+        },
+        {
+            id: 3,
+            title: 'Analytics',
+            content: (_jsx(Analytics, { data: data, valueKey: valueKey, itemMetricsData: itemMetricsData, valueMetricsData: valueMetricsData, averageMetricsData: averageMetricsData, distributionMetricsData: distributionMetricsData })),
+        },
+    ];
+    return (_jsxs(Modal, { show: isOpen, onClose: onClose, size: "7xl", children: [_jsx(Modal.Header, { children: _jsx("div", { className: "flex justify-between items-center w-full", children: _jsxs("h3", { className: "text-xl font-semibold", children: [title, " - Detailed Analysis"] }) }) }), _jsx(Modal.Body, { children: _jsx(Tab, { tabs: tabs, defaultTab: 0 }) })] }));
+};
+export default ChartDetailsModal;

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

@@ -0,0 +1,29 @@
+import type { ChartOptionsProps } from '../types';
+interface ChartDetailsModalWrapperProps {
+    metricDetailData: any;
+    isModalOpen: boolean;
+    setIsModalOpen: (open: boolean) => void;
+    fullData: any[];
+    columns: any[];
+    error: any;
+    isEmpty: boolean;
+    loading: boolean;
+    detailsTableTitle?: string;
+    refresh: () => void;
+    renderDetailsChart: boolean;
+    chartData: ChartOptionsProps<unknown>;
+    top5PerformingItems: ChartOptionsProps<unknown>;
+    bottom5NonPerformingItems: ChartOptionsProps<unknown>;
+    valueKey: string;
+    dataGridQuery: any;
+    searchKey: string;
+    searchInputPlaceHolder: string;
+    itemMetricsData: any;
+    valueMetricsData: any;
+    averageMetricsData: any;
+    distributionMetricsData: any;
+    topFivePerformingChartTitle?: string;
+    bottomFivePerformingChartTitle?: string;
+}
+declare const ChartDetailsModalWrapper: ({ metricDetailData, isModalOpen, setIsModalOpen, fullData, columns, error, isEmpty, loading, detailsTableTitle, refresh, renderDetailsChart, chartData, top5PerformingItems, bottom5NonPerformingItems, valueKey, dataGridQuery, searchKey, searchInputPlaceHolder, itemMetricsData, valueMetricsData, averageMetricsData, distributionMetricsData, topFivePerformingChartTitle, bottomFivePerformingChartTitle, }: ChartDetailsModalWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default ChartDetailsModalWrapper;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ChartDetailsModal from './ChartDetailsModal';
+const ChartDetailsModalWrapper = ({ metricDetailData, isModalOpen, setIsModalOpen, fullData, columns, error, isEmpty, loading, detailsTableTitle, refresh, renderDetailsChart, chartData, top5PerformingItems, bottom5NonPerformingItems, valueKey, dataGridQuery, searchKey, searchInputPlaceHolder, itemMetricsData, valueMetricsData, averageMetricsData, distributionMetricsData, topFivePerformingChartTitle, bottomFivePerformingChartTitle, }) => (_jsx(ChartDetailsModal, { title: metricDetailData.title, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), data: fullData, columns: columns, error: error, isEmpty: isEmpty, loading: loading, detailsTableTitle: detailsTableTitle, refresh: refresh, renderDetailsChart: renderDetailsChart, chartData: chartData, top5PerformingItems: top5PerformingItems, bottom5NonPerformingItems: bottom5NonPerformingItems, valueKey: valueKey, dataGridQuery: dataGridQuery, searchKey: searchKey, searchInputPlaceHolder: searchInputPlaceHolder, itemMetricsData: itemMetricsData, valueMetricsData: valueMetricsData, averageMetricsData: averageMetricsData, distributionMetricsData: distributionMetricsData, topFivePerformingChartTitle: topFivePerformingChartTitle, bottomFivePerformingChartTitle: bottomFivePerformingChartTitle }));
+export default ChartDetailsModalWrapper;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+interface ChartFormatterProps {
+    metricData: any[];
+    xAxisDataValueKey: string;
+    seriesDataNameKey: string;
+    seriesDataValueKey: string;
+    chartType: 'bar' | 'line';
+    chartOptions: any;
+    chartHeight?: string | number;
+    notMerge?: boolean;
+    stacked?: boolean;
+    smooth?: boolean;
+    symbolConfig?: {
+        symbol?: string;
+        size?: number;
+        color?: string;
+        borderColor?: string;
+        borderWidth?: number;
+    };
+}
+declare const ChartFormatter: React.FC<ChartFormatterProps>;
+export default ChartFormatter;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useMemo } from 'react';
+import { getBarChartData } from '../utils';
+const ChartFormatter = ({ metricData, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, chartType, chartOptions, chartHeight = '350px', notMerge = false, stacked, smooth = false, symbolConfig, }) => {
+    const formattedChartData = useMemo(() => {
+        if (metricData.length === 0)
+            return { xAxisValues: [], seriesData: [] };
+        const { xAxisValues, seriesData } = getBarChartData(metricData, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey);
+        let transformedSeries;
+        if (chartType === 'bar') {
+            transformedSeries = seriesData.map((series) => ({
+                ...series,
+                type: 'bar',
+                stack: stacked ? 'stack' : undefined,
+            }));
+        }
+        else if (chartType === 'line') {
+            transformedSeries = seriesData.map((series) => ({
+                ...series,
+                type: 'line',
+                smooth: smooth,
+                symbol: symbolConfig?.symbol || 'circle',
+                symbolSize: symbolConfig?.size || 8,
+                itemStyle: {
+                    color: symbolConfig?.color,
+                    borderColor: symbolConfig?.borderColor,
+                    borderWidth: symbolConfig?.borderWidth || 2,
+                },
+            }));
+        }
+        return { xAxisValues, seriesData: transformedSeries };
+    }, [metricData, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, chartType, stacked, smooth, symbolConfig]);
+    const mergedOptions = useMemo(() => {
+        return {
+            ...chartOptions,
+            xAxis: {
+                ...chartOptions.xAxis,
+                data: formattedChartData.xAxisValues,
+            },
+            series: formattedChartData.seriesData,
+        };
+    }, [chartOptions, formattedChartData]);
+    return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: mergedOptions, style: { height: chartHeight }, notMerge: notMerge }) }));
+};
+export default ChartFormatter;

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { ApiErrorResponse } from '../../api';
+interface ChartWrapperProps {
+    loading: boolean;
+    error: ApiErrorResponse | undefined;
+    isEmpty: boolean;
+    onRetry: () => void;
+    children: ReactNode;
+}
+declare const ChartWrapper: ({ loading, error, isEmpty, onRetry, children }: ChartWrapperProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export default ChartWrapper;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import EmptyMetricState from './EmptyState';
+import ErrorState from './ErrorState';
+import TileSkeleton from './TileSkeleton';
+const ChartWrapper = ({ loading, error, isEmpty, onRetry, children }) => {
+    if (loading)
+        return _jsx(TileSkeleton, {});
+    if (error)
+        return _jsx(ErrorState, { error: error, onRetry: onRetry });
+    if (isEmpty)
+        return _jsx(EmptyMetricState, {});
+    return children;
+};
+export default ChartWrapper;

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

@@ -0,0 +1,8 @@
+import type { FilterConfig } from './types';
+interface DashboardFilterProps {
+    filters: FilterConfig[];
+    selectedFilters: Record<string, string | string[] | null>;
+    handleFilterChange: (name: string, value: string | string[] | null) => void;
+}
+declare const DashboardFilter: ({ filters, selectedFilters, handleFilterChange }: DashboardFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default DashboardFilter;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterWrapper, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
+import { useMediaQueries } from '../../shared';
+const DashboardFilter = ({ filters, selectedFilters, handleFilterChange }) => {
+    const { isSm } = useMediaQueries();
+    return (_jsx(FilterWrapper, { isNarrow: isSm, children: filters.length > 0 &&
+            filters.map((filterObj) => {
+                if (filterObj.type !== 'select') {
+                    // Handle other filter types if needed
+                    return null;
+                }
+                const { name, options } = filterObj;
+                const value = selectedFilters[name];
+                return (_jsx("div", { className: isSm ? 'w-full' : 'flex-1 min-w-[150px]', children: _jsxs(Select, { value: value || 'All', onValueChange: (val) => handleFilterChange(name, val), children: [_jsx(SelectTrigger, { className: "w-full bg-white", children: _jsx(SelectValue, { placeholder: `Filter by ${name}` }) }), _jsx(SelectContent, { children: options.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] }, `filter-${name}`) }, name));
+            }) }));
+};
+export default DashboardFilter;

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

@@ -0,0 +1,3 @@
+import { type ReusableTableProps } from './types';
+declare const ReusableTable: <TData extends Record<string, any>>({ columns, data, title, initialState, enableGlobalSearch, enableColumnFilters, enableSorting, enablePagination, enableRowSelection, enableColumnReordering, enableStickyHeader, tableOptions, }: ReusableTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default ReusableTable;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionIcon, Text, Tooltip } from '@mantine/core';
+import { IconCopy } from '@tabler/icons-react';
+import { MantineReactTable } from 'mantine-react-table';
+import { useMemo } from 'react';
+const ReusableTable = ({ columns, data, title, initialState, enableGlobalSearch = false, enableColumnFilters = false, enableSorting = true, enablePagination = false, enableRowSelection = false, enableColumnReordering = false, enableStickyHeader = false, tableOptions, }) => {
+    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: ({ cell }) => {
+                        return extendedColumn.formattedCellElement(cell.getValue());
+                    },
+                };
+            }
+            return column;
+        });
+    }, [columns]);
+    const memoizedData = useMemo(() => data, [data]);
+    const tableOptionsMerged = useMemo(() => ({
+        columns: enhancedColumns,
+        data: memoizedData,
+        initialState,
+        enableGlobalFilter: enableGlobalSearch,
+        enableColumnFilters,
+        enableSorting,
+        enablePagination,
+        enableRowSelection,
+        enableColumnReordering,
+        enableStickyHeader,
+        ...tableOptions,
+    }), [
+        enhancedColumns,
+        memoizedData,
+        initialState,
+        enableGlobalSearch,
+        enableColumnFilters,
+        enableSorting,
+        enablePagination,
+        enableRowSelection,
+        enableColumnReordering,
+        enableStickyHeader,
+        tableOptions,
+    ]);
+    return (_jsx(MantineReactTable, { ...tableOptionsMerged, renderTopToolbarCustomActions: () => title ? (_jsx(Text, { size: "lg", weight: 700, children: title })) : null }));
+};
+export default ReusableTable;

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

@@ -0,0 +1,6 @@
+interface EmptyMetricStateProps {
+    message?: string;
+    icon?: React.ReactNode;
+}
+declare const EmptyMetricState: ({ message, icon }: EmptyMetricStateProps) => import("react/jsx-runtime").JSX.Element;
+export default EmptyMetricState;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineInformationCircle } from 'react-icons/hi';
+const EmptyMetricState = ({ message = 'No metric data available', icon }) => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-y-2 text-center pb-4", "aria-live": "polite", "aria-atomic": "true", children: [icon ?? _jsx(HiOutlineInformationCircle, { className: "w-[50px] h-[50px] text-gray-400", "aria-hidden": "true" }), _jsx("div", { className: "space-y-1", children: message && _jsx("p", { className: "text-xs text-gray-500 max-w-[160px] mx-auto", children: message }) })] }));
+};
+export default EmptyMetricState;

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

@@ -0,0 +1,7 @@
+import type { ApiErrorResponse } from '../../api';
+interface ErrorStateProps {
+    error: ApiErrorResponse | Error;
+    onRetry?: () => void;
+}
+declare const ErrorState: ({ error, onRetry }: ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorState;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ErrorState = ({ error, onRetry }) => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center space-y-2 py-4", children: [_jsx("div", { className: "text-red-500 mb-2", children: _jsx("svg", { className: "w-8 h-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsx("p", { className: "text-sm text-gray-600 text-center", children: error.message ?? 'Failed to fetch data' }), onRetry && (_jsx("button", { onClick: onRetry, className: "mt-2 px-4 py-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600 transition-colors", children: "Retry" }))] }));
+};
+export default ErrorState;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from 'flowbite-react';
+import React from 'react';
+const SkeletonItem = () => _jsx("div", { className: "h-6 bg-gray-200 rounded-full w-[16%]" });
+const FilterComponentSkeleton = () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const skeletonItems = Array.from({ length: 4 }, (_, index) => _jsx(SkeletonItem, {}, index));
+    return (_jsx(Card, { className: "mb-5", children: _jsx("div", { className: "animate-pulse", children: _jsx("div", { className: "flex space-x-3", children: skeletonItems }) }) }));
+};
+// Wrapping the component with React.memo since it will always render the same output.
+export default React.memo(FilterComponentSkeleton);

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface PaginationProps {
+    currentPage: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PAGE_SIZES = [5, 10, 20, 50];
+const Pagination = ({ currentPage, pageSize, totalItems, onPageChange, onPageSizeChange, }) => {
+    const totalPages = Math.ceil(totalItems / pageSize);
+    return (_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 mt-2 px-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600", children: "Items per page:" }), _jsx("select", { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), className: "border rounded-md px-2 py-1 text-sm bg-white", children: PAGE_SIZES.map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "px-3 py-1 rounded-md border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-600", children: ["Page ", currentPage, " of ", totalPages] }), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "px-3 py-1 rounded-md border disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50", children: "Next" })] })] }));
+};
+export default Pagination;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CustomSwitchProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    themeColor?: string;
+}
+declare const CustomSwitch: React.FC<CustomSwitchProps>;
+export default CustomSwitch;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+const CustomSwitch = ({ checked, onCheckedChange, themeColor }) => {
+    return (_jsx(SwitchPrimitive.Root, { className: `relative inline-flex h-6 w-11 items-center rounded-full border-2 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500`, checked: checked, onCheckedChange: onCheckedChange, style: {
+            backgroundColor: checked ? themeColor : '#E5E7EB',
+        }, children: _jsx(SwitchPrimitive.Thumb, { className: `block h-4 w-4 rounded-full border-transparent bg-white transition-transform ${checked ? 'translate-x-5' : 'translate-x-1'}`, style: {
+                border: `2px solid ${themeColor}`,
+            } }) }));
+};
+export default CustomSwitch;

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

@@ -0,0 +1,2 @@
+declare const TileSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default TileSkeleton;