@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/context/BreadcrumbContext.js

@@ -0,0 +1,238 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HiChartPie } from 'react-icons/hi';
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { isUUIDorID } from '../shared';
+const AppBreadcrumbContext = createContext(undefined);
+/**
+ * Create a flat map of all valid paths from the sidebar pages config
+ */
+function createPathMap(pages, parentPath = '') {
+    const pathMap = new Map();
+    for (const page of pages) {
+        const fullPath = parentPath + (page.href || '');
+        if (page.href) {
+            pathMap.set(fullPath, { label: page.label, icon: page.icon });
+        }
+        if (page.items) {
+            const childPaths = createPathMap(page.items, fullPath);
+            childPaths.forEach((value, key) => pathMap.set(key, value));
+        }
+    }
+    return pathMap;
+}
+/**
+ * Check if a path represents a valid route by examining URL structure patterns
+ * This is a conservative approach - only make something clickable if we're confident it exists
+ */
+function isValidRoute(segments, currentIndex, pathMap) {
+    // Never make the last segment clickable (it's the current page)
+    if (currentIndex === segments.length - 1) {
+        return false;
+    }
+    // Build the path up to this segment
+    const pathUpToHere = '/' + segments.slice(0, currentIndex + 1).join('/');
+    // If this exact path exists in the sidebar config, it's definitely clickable
+    if (pathMap.has(pathUpToHere)) {
+        return true;
+    }
+    const segment = segments[currentIndex];
+    // For UUID segments, only make clickable if there are non-UUID segments after
+    // This means it's likely a detail page with sub-sections
+    if (isUUIDorID(segment)) {
+        for (let i = currentIndex + 1; i < segments.length; i++) {
+            if (!isUUIDorID(segments[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // For regular segments (like "merchants", "vendors"), be very conservative
+    // Only make clickable if it's in the sidebar config
+    return false;
+}
+/**
+ * Get appropriate label for a segment
+ */
+function getSegmentLabel(segment, parentPath, pathMap) {
+    // Check if this exact path exists in sidebar
+    const fullPath = parentPath + '/' + segment;
+    const pageConfig = pathMap.get(fullPath);
+    if (pageConfig) {
+        return pageConfig.label;
+    }
+    // For UUID/ID segments, default to "Loading..." (will be updated by components)
+    if (isUUIDorID(segment)) {
+        return 'Loading...';
+    }
+    // For regular segments, convert to readable format immediately
+    // Handle common patterns like "sub-merchants" -> "Sub Merchants"
+    return segment
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+/**
+ * Build breadcrumbs with proper route validation (Conservative mode - for VAS app)
+ */
+function buildBreadcrumbsFromPath(pathname, pathMap, manualUpdates) {
+    const segments = pathname.replace(/\/$/, '').split('/').filter(Boolean);
+    const breadcrumbs = [];
+    let currentPath = '';
+    let rootIcon = undefined;
+    for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        currentPath += `/${segment}`;
+        const parentPath = '/' + segments.slice(0, i).join('/');
+        // Check if this exact path exists in sidebar config
+        const pageConfig = pathMap.get(currentPath);
+        // Determine if this should be clickable using improved logic
+        const isClickable = isValidRoute(segments, i, pathMap);
+        // Get the appropriate label
+        let label;
+        if (pageConfig) {
+            // Use sidebar config label if available
+            label = manualUpdates[currentPath] || pageConfig.label;
+        }
+        else if (isUUIDorID(segment)) {
+            // For UUID segments, use manual update or default to "Loading..."
+            label = manualUpdates[segment] || 'Loading...';
+        }
+        else {
+            // For regular segments, convert to readable format immediately
+            label = manualUpdates[currentPath] || getSegmentLabel(segment, parentPath, pathMap);
+        }
+        // Set root icon from first exact match
+        if (pageConfig && i === 0 && !rootIcon) {
+            rootIcon = pageConfig.icon;
+        }
+        breadcrumbs.push({
+            label,
+            path: isClickable ? currentPath : undefined,
+            key: isUUIDorID(segment) ? segment : undefined,
+        });
+    }
+    return { breadcrumbs, rootIcon };
+}
+/**
+ * Build breadcrumbs for permissive mode
+ */
+function buildBreadcrumbsPermissive(pathname, pathMap, manualUpdates, pages) {
+    const pathSegments = pathname.replace(/\/$/, '').split('/').filter(Boolean);
+    let newBreadcrumbs = [];
+    let icon = undefined;
+    if (pathSegments.length === 0) {
+        return {
+            breadcrumbs: [{ label: 'Dashboard', path: '/dashboard' }],
+            rootIcon: HiChartPie,
+        };
+    }
+    let currentPath = '';
+    // Find the deepest matching page config
+    let foundConfig = undefined;
+    function findPageConfigWithParents(pages, path, parents = []) {
+        for (const page of pages) {
+            if (page.href === path)
+                return { page, parents };
+            if (page.items) {
+                const found = findPageConfigWithParents(page.items, path, [...parents, page]);
+                if (found.page)
+                    return found;
+            }
+        }
+        return { page: undefined, parents: [] };
+    }
+    for (const segment of pathSegments) {
+        currentPath += `/${segment}`;
+        const { page } = findPageConfigWithParents(pages, currentPath);
+        if (page) {
+            foundConfig = page;
+        }
+    }
+    // Helper to set icon only if not already set
+    const setIcon = (candidate) => {
+        if (!icon && candidate)
+            icon = candidate;
+    };
+    function getManualLabel(segment, fallback) {
+        return manualUpdates[segment] ?? fallback;
+    }
+    function getUUIDBreadcrumb(segment, currentPath, newBreadcrumbs) {
+        const previousLabel = newBreadcrumbs[newBreadcrumbs.length - 1]?.label;
+        if (previousLabel) {
+            const baseLabel = previousLabel.replace(/s$/, '');
+            const label = getManualLabel(segment, `${baseLabel} Details`);
+            return {
+                label,
+                path: currentPath,
+                key: segment,
+            };
+        }
+        return null;
+    }
+    // Add the current page only (not parents)
+    if (foundConfig) {
+        const currentPath = foundConfig.href ?? '';
+        setIcon(foundConfig.icon);
+        newBreadcrumbs.push({ label: getManualLabel(foundConfig.href ?? '', foundConfig.label), path: currentPath });
+    }
+    // If there are extra segments (e.g. UUIDs), process them
+    const extraSegments = pathSegments.slice(foundConfig?.href?.split('/').filter(Boolean).length ?? 0);
+    let buildPath = foundConfig?.href ?? '';
+    for (const segment of extraSegments) {
+        buildPath += `/${segment}`;
+        if (isUUIDorID(segment)) {
+            const uuidBreadcrumb = getUUIDBreadcrumb(segment, buildPath, newBreadcrumbs);
+            if (uuidBreadcrumb)
+                newBreadcrumbs.push(uuidBreadcrumb);
+        }
+        else {
+            newBreadcrumbs.push({
+                label: getManualLabel(segment, segment.charAt(0).toUpperCase() + segment.slice(1)),
+                path: buildPath,
+            });
+        }
+    }
+    return { breadcrumbs: newBreadcrumbs, rootIcon: icon ?? HiChartPie };
+}
+const AppBreadcrumbProvider = ({ children, pathname, pages, mode = 'conservative' }) => {
+    const manualUpdates = useRef({});
+    const [forceUpdate, setForceUpdate] = useState(0);
+    const pathMap = useMemo(() => createPathMap(pages), [pages]);
+    const { breadcrumbs, rootPageIcon } = useMemo(() => {
+        if (pathname === '/' || pathname === '') {
+            return {
+                breadcrumbs: [{ label: 'Dashboard', path: '/dashboard' }],
+                rootPageIcon: HiChartPie,
+            };
+        }
+        if (mode === 'permissive') {
+            const { breadcrumbs, rootIcon } = buildBreadcrumbsPermissive(pathname, pathMap, manualUpdates.current, pages);
+            return { breadcrumbs, rootPageIcon: rootIcon ?? HiChartPie };
+        }
+        else {
+            const { breadcrumbs, rootIcon } = buildBreadcrumbsFromPath(pathname, pathMap, manualUpdates.current);
+            return { breadcrumbs, rootPageIcon: rootIcon ?? HiChartPie };
+        }
+    }, [pathname, pathMap, forceUpdate, mode, pages]);
+    const updateBreadcrumb = useCallback((key, newLabel) => {
+        manualUpdates.current[key] = newLabel;
+        setForceUpdate((prev) => prev + 1); // Force re-render
+    }, []);
+    const value = useMemo(() => ({
+        breadcrumbs,
+        updateBreadcrumb,
+        pathname,
+        rootPageIcon,
+    }), [breadcrumbs, updateBreadcrumb, pathname, rootPageIcon]);
+    return _jsx(AppBreadcrumbContext.Provider, { value: value, children: children });
+};
+const useAppBreadcrumbs = () => {
+    const context = useContext(AppBreadcrumbContext);
+    if (!context) {
+        throw new Error('useBreadcrumbs must be used within a BreadcrumbProvider');
+    }
+    return context;
+};
+export default AppBreadcrumbProvider;
+export { useAppBreadcrumbs };

package/lib/context/FormEngineDrawerProvider.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+/**
+ * @deprecated Use `MultiFormEngineDrawerProvider` instead. This will be removed in a future version.
+ */
+type FormEngineDrawerContextType = {
+    isOpen: boolean;
+    handleOpenDrawer: () => void;
+    handleCloseDrawer: () => void;
+};
+/**
+ * @deprecated Use `MultiFormEngineDrawerProvider` instead. This will be removed in a future version.
+ */
+export declare const FormEngineDrawerProvider: ({ pathname, children }: {
+    pathname: string;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `useMultiFormEngineDrawer` instead. This will be removed in a future version.
+ */
+export declare const useFormEngineDrawer: () => FormEngineDrawerContextType;
+export {};

package/lib/context/FormEngineDrawerProvider.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { setupInputRegistry } from '../form-engine/registry';
+/**
+ * @deprecated Use `MultiFormEngineDrawerProvider` instead. This will be removed in a future version.
+ */
+const FormEngineDrawerContext = createContext(undefined);
+/**
+ * @deprecated Use `MultiFormEngineDrawerProvider` instead. This will be removed in a future version.
+ */
+export const FormEngineDrawerProvider = ({ pathname, children }) => {
+    console.warn('FormEngineDrawerProvider is deprecated and will be removed in a future version. Use MultiFormEngineDrawerProvider instead.');
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        setupInputRegistry();
+    }, []);
+    const handleOpenDrawer = useCallback(() => setIsOpen(true), []);
+    const handleCloseDrawer = useCallback(() => setIsOpen(false), []);
+    useEffect(() => {
+        setIsOpen(false);
+    }, [pathname]);
+    const contextValue = useMemo(() => ({
+        isOpen,
+        handleOpenDrawer,
+        handleCloseDrawer,
+    }), [isOpen, handleOpenDrawer, handleCloseDrawer]);
+    return _jsx(FormEngineDrawerContext.Provider, { value: contextValue, children: children });
+};
+/**
+ * @deprecated Use `useMultiFormEngineDrawer` instead. This will be removed in a future version.
+ */
+export const useFormEngineDrawer = () => {
+    const context = useContext(FormEngineDrawerContext);
+    if (!context) {
+        throw new Error('useFormEngineDrawer must be used within a FormEngineDrawerProvider');
+    }
+    return context;
+};

package/lib/context/MultiFormEngineDrawerProvider.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { FormPersistenceContextType } from '../form-engine/types';
+/**
+ * Type definition for the new form engine drawer context
+ * Supports multiple drawers using unique keys
+ */
+type MultiFormEngineDrawerProviderContextType = {
+    isOpen: (key: string) => boolean;
+    isAnyDrawerOpen: () => boolean;
+    handleOpenDrawer: (key: string) => void;
+    handleCloseDrawer: (key: string) => void;
+} & FormPersistenceContextType;
+/**
+ * Provider component for the new form engine drawer
+ * Supports multiple drawers using unique keys and form persistence
+ */
+export declare const MultiFormEngineDrawerProvider: ({ pathname, children }: {
+    pathname: string;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the new form engine drawer context
+ */
+export declare const useMultiFormEngineDrawer: () => MultiFormEngineDrawerProviderContextType;
+export {};

package/lib/context/MultiFormEngineDrawerProvider.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { setupInputRegistry } from '../form-engine/registry';
+/**
+ * Context for managing the new form engine drawer state
+ */
+const MultiFormEngineDrawerProviderContext = createContext(undefined);
+/**
+ * Provider component for the new form engine drawer
+ * Supports multiple drawers using unique keys and form persistence
+ */
+export const MultiFormEngineDrawerProvider = ({ pathname, children }) => {
+    const [drawerStates, setDrawerStates] = useState(new Map());
+    const formDataRef = useRef(new Map());
+    useEffect(() => {
+        setupInputRegistry();
+    }, []);
+    const handleOpenDrawer = useCallback((key) => {
+        setDrawerStates((prev) => new Map(prev).set(key, true));
+    }, []);
+    const handleCloseDrawer = useCallback((key) => {
+        setDrawerStates((prev) => {
+            const newStates = new Map(prev);
+            newStates.delete(key);
+            return newStates;
+        });
+    }, []);
+    const isOpen = useCallback((key) => drawerStates.get(key) === true, [drawerStates]);
+    const isAnyDrawerOpen = useCallback(() => drawerStates.size > 0, [drawerStates]);
+    // Form persistence methods
+    const getFormData = useCallback((key) => {
+        return formDataRef.current.get(key) || null;
+    }, []);
+    const setFormData = useCallback((key, data) => {
+        const existingData = formDataRef.current.get(key);
+        const newData = {
+            values: {},
+            lastUpdated: Date.now(),
+            isDirty: false,
+            ...existingData,
+            ...data,
+        };
+        formDataRef.current.set(key, newData);
+    }, []);
+    const clearFormData = useCallback((key) => {
+        formDataRef.current.delete(key);
+    }, []);
+    const clearAllFormData = useCallback(() => {
+        formDataRef.current.clear();
+    }, []);
+    const hasFormData = useCallback((key) => {
+        return formDataRef.current.has(key);
+    }, []);
+    useEffect(() => {
+        setDrawerStates(new Map());
+    }, [pathname]);
+    const contextValue = useMemo(() => ({
+        isOpen,
+        isAnyDrawerOpen,
+        handleOpenDrawer,
+        handleCloseDrawer,
+        getFormData,
+        setFormData,
+        clearFormData,
+        clearAllFormData,
+        hasFormData,
+    }), [
+        isOpen,
+        isAnyDrawerOpen,
+        handleOpenDrawer,
+        handleCloseDrawer,
+        getFormData,
+        setFormData,
+        clearFormData,
+        clearAllFormData,
+        hasFormData,
+    ]);
+    return (_jsx(MultiFormEngineDrawerProviderContext.Provider, { value: contextValue, children: children }));
+};
+/**
+ * Hook to access the new form engine drawer context
+ */
+export const useMultiFormEngineDrawer = () => {
+    const context = useContext(MultiFormEngineDrawerProviderContext);
+    if (!context) {
+        throw new Error('useFormEngineDrawerV2 must be used within a FormEngineDrawerProviderV2');
+    }
+    return context;
+};

package/lib/context/SidebarContext.d.ts

@@ -0,0 +1,65 @@
+import type { FC, HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
+import React from 'react';
+interface AppSidebarPageItem {
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    icon?: FC;
+    label: string;
+    items?: AppSidebarPageItem[];
+    badge?: string;
+    roles?: string[];
+    forceDropdown?: boolean;
+}
+/**
+ * Props for the AppSidebarContext
+ * @interface AppSidebarContextProps
+ * @property {Object} desktop - Desktop sidebar state and controls
+ * @property {Object} mobile - Mobile sidebar state and controls
+ * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
+ * @property {string} pathname - Current route pathname
+ * @property {React.ElementType} linkComponent - Component used for navigation links
+ */
+interface AppSidebarContextProps {
+    desktop: {
+        isCollapsed: boolean;
+        setCollapsed(value: boolean): void;
+        toggle(): void;
+    };
+    mobile: {
+        isOpen: boolean;
+        close(): void;
+        toggle(): void;
+    };
+    pages: AppSidebarPageItem[];
+    pathname: string;
+    linkComponent: React.ElementType;
+}
+/**
+ * Props for the AppSidebarProvider component
+ * @interface AppSidebarProviderProps
+ * @property {boolean} initialCollapsed - Initial collapsed state of desktop sidebar
+ * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
+ * @property {string} pathname - Current route pathname
+ * @property {React.ElementType} linkComponent - Component used for navigation links
+ * @property {ReactNode} children - Child components
+ */
+interface AppSidebarProviderProps extends PropsWithChildren {
+    initialCollapsed: boolean;
+    pages: AppSidebarPageItem[];
+    pathname: string;
+    linkComponent: React.ElementType;
+}
+/**
+ * Provider component for sidebar state management
+ * @param {AppSidebarProviderProps} props - Component props
+ */
+declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook for accessing sidebar context
+ * @throws {Error} When used outside AppSidebarProvider
+ * @returns {AppSidebarContextProps} Sidebar context value
+ */
+declare const useAppSidebarContext: () => AppSidebarContextProps;
+export default AppSidebarProvider;
+export { useAppSidebarContext };
+export type { AppSidebarContextProps, AppSidebarProviderProps, AppSidebarPageItem };

package/lib/context/SidebarContext.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from 'react';
+/**
+ * Context for managing sidebar state across desktop and mobile views
+ */
+const AppSidebarContext = createContext(null);
+/**
+ * Provider component for sidebar state management
+ * @param {AppSidebarProviderProps} props - Component props
+ */
+const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, }) => {
+    const [isOpenMobile, setIsOpenMobile] = useState(false);
+    const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
+    function handleSetCollapsed(value) {
+        setIsCollapsed(value);
+    }
+    const value = useMemo(() => ({
+        desktop: {
+            isCollapsed,
+            setCollapsed: handleSetCollapsed,
+            toggle: () => handleSetCollapsed(!isCollapsed),
+        },
+        mobile: {
+            isOpen: isOpenMobile,
+            close: () => setIsOpenMobile(false),
+            toggle: () => setIsOpenMobile((state) => !state),
+        },
+        pages,
+        pathname,
+        linkComponent,
+    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent]);
+    return _jsx(AppSidebarContext.Provider, { value: value, children: children });
+};
+/**
+ * Hook for accessing sidebar context
+ * @throws {Error} When used outside AppSidebarProvider
+ * @returns {AppSidebarContextProps} Sidebar context value
+ */
+const useAppSidebarContext = () => {
+    const context = useContext(AppSidebarContext);
+    if (!context) {
+        throw new Error('useSidebarContext must be used within the SidebarContext provider!');
+    }
+    return context;
+};
+export default AppSidebarProvider;
+export { useAppSidebarContext };

package/lib/context/ToastContext.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { type ToastVariant } from '../components/ui/Toast';
+export interface PartialToastData {
+    title?: string;
+    message: string;
+    variant: ToastVariant;
+}
+interface ToastContextProps {
+    addToast: (props: PartialToastData) => void;
+}
+export declare const useToast: () => ToastContextProps;
+interface ToastProviderProps {
+    children: ReactNode;
+}
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export {};

package/lib/context/ToastContext.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import Toast from '../components/ui/Toast';
+const ToastContext = createContext(undefined);
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+};
+export const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = useState([]);
+    const removeToast = useCallback((id) => {
+        setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+    }, []);
+    const addToast = useCallback((props) => {
+        const { message, title = '', variant = 'info' } = props;
+        const id = Date.now();
+        setToasts((prevToasts) => [...prevToasts, { id, title, message, variant }]);
+        // Remove the toast automatically after 5 seconds
+        setTimeout(() => {
+            removeToast(id);
+        }, 5000);
+    }, [removeToast]);
+    // Wrap the value in useMemo so it remains stable unless addToast changes
+    const contextValue = useMemo(() => ({ addToast }), [addToast]);
+    return (_jsxs(ToastContext.Provider, { value: contextValue, children: [children, _jsx("div", { className: "fixed right-0 top-4 z-50 m-4 space-y-2", style: { zIndex: 1000 }, children: toasts.map((toast) => (_jsx(Toast, { id: toast.id, title: toast.title, message: toast.message, variant: toast.variant, onClose: removeToast }, toast.id))) })] }));
+};

package/lib/context/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AppBreadcrumbProvider, useAppBreadcrumbs, type AppBreadcrumbContextType, type AppBreadcrumb, } from './BreadcrumbContext';
+export { FormEngineDrawerProvider, useFormEngineDrawer } from './FormEngineDrawerProvider';
+export { MultiFormEngineDrawerProvider, useMultiFormEngineDrawer } from './MultiFormEngineDrawerProvider';
+export { ToastProvider, useToast } from './ToastContext';
+export { default as AppSidebarProvider, useAppSidebarContext, type AppSidebarContextProps, type AppSidebarPageItem, } from './SidebarContext';

package/lib/context/index.js

@@ -0,0 +1,5 @@
+export { default as AppBreadcrumbProvider, useAppBreadcrumbs, } from './BreadcrumbContext';
+export { FormEngineDrawerProvider, useFormEngineDrawer } from './FormEngineDrawerProvider';
+export { MultiFormEngineDrawerProvider, useMultiFormEngineDrawer } from './MultiFormEngineDrawerProvider';
+export { ToastProvider, useToast } from './ToastContext';
+export { default as AppSidebarProvider, useAppSidebarContext, } from './SidebarContext';

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { QueryProps } from '../../shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, MetricData, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+import { processTooltipFields } from '../utils/tooltipUtils';
+interface BaseChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    url?: string;
+    query: QueryProps;
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    children: (props: {
+        loading: boolean;
+        error: any;
+        isEmpty: boolean;
+        refresh: () => void;
+        metricData: any[];
+        tooltipFormatterFn?: (params: any) => string;
+        processedTooltipFields?: ReturnType<typeof processTooltipFields>;
+    }) => React.ReactNode;
+    detailsModalTitle: string;
+    statisticsUrl?: string;
+    itemStatisticsQuery: StatisticsQueryProps;
+    valueMetricsQuery: StatisticsQueryProps;
+    averageMetricsQuery: StatisticsQueryProps;
+    distributionMetricsQuery: DistributionQueryProps;
+    yAxisDataNameKey: string;
+    xAxisNameKey: string;
+    xAxisLabel: string;
+    yAxisLabel: string;
+    nameKey: string;
+    valueKey: string;
+    dataGridSearchKey: string;
+    dataGridColumns: TableColumn<TData>[];
+    dataSearchInputPlaceHolder: string;
+    chartToolTip?: ChartToolTipProps;
+    detailsTableTitle?: string;
+    getChartOptions: (data: MetricData[]) => void;
+    tooltipValueFormat?: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    topFivePerformingChartTitle?: string;
+    bottomFivePerformingChartTitle?: string;
+    distributionChartTooltip: DistributionChartTooltip;
+    showDetailsModal?: boolean;
+    currencyDisplaySymbol?: string;
+}
+declare const BaseChart: <TData extends {
+    id: string | number;
+}>({ title, url, query, chartDetails, children, detailsModalTitle, statisticsUrl, itemStatisticsQuery, valueMetricsQuery, averageMetricsQuery, distributionMetricsQuery, yAxisDataNameKey, xAxisNameKey, xAxisLabel, yAxisLabel, nameKey, valueKey, dataGridSearchKey, dataGridColumns, dataSearchInputPlaceHolder, chartToolTip, detailsTableTitle, getChartOptions, tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, topFivePerformingChartTitle, bottomFivePerformingChartTitle, distributionChartTooltip, showDetailsModal, currencyDisplaySymbol, ...props }: BaseChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default BaseChart;