@pagamio/frontend-commons-lib 0.8.212 → 0.8.214

package/lib/api/tanstackQuery.js

@@ -0,0 +1,299 @@
+/**
+ * @fileoverview TanStack Query integration for the API client
+ * Provides hooks for data fetching, mutations, and cache management
+ */
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
+import { useApi } from './context';
+/**
+ * Creates a fetcher function using the existing ApiClient
+ * @template ResponseData - Expected response type
+ */
+function useApiFetcher() {
+    const api = useApi();
+    return async (endpoint, config) => {
+        switch (config?.method) {
+            case 'POST':
+                return api.post(endpoint, config.body ? JSON.parse(config.body.toString()) : undefined, config);
+            case 'PUT':
+                return api.put(endpoint, config.body ? JSON.parse(config.body.toString()) : undefined, config);
+            case 'PATCH':
+                return api.patch(endpoint, config.body ? JSON.parse(config.body.toString()) : undefined, config);
+            case 'DELETE':
+                return api.delete(endpoint, config);
+            default:
+                return api.get(endpoint, config);
+        }
+    };
+}
+/**
+ * Main TanStack Query hook that automatically inherits auth config
+ * @template TData - Type of the expected response data
+ * @template TError - Type of the error response (defaults to ApiErrorResponse)
+ *
+ * @example
+ * ```tsx
+ * function UsersList() {
+ *   const { data, isLoading, error } = useApiQuery<User[]>({
+ *     queryKey: ['users'],
+ *     endpoint: '/users',
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return (
+ *     <ul>
+ *       {data?.map(user => <li key={user.id}>{user.name}</li>)}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+export function useApiQuery(options) {
+    const fetcher = useApiFetcher();
+    const { queryKey, endpoint, requestConfig, ...queryOptions } = options;
+    return useQuery({
+        queryKey,
+        queryFn: () => fetcher(endpoint, requestConfig),
+        ...queryOptions,
+    });
+}
+/**
+ * Paginated TanStack Query hook for Spring Boot style responses
+ * @template TItem - Type of items in the paginated response
+ * @template TError - Type of the error response
+ *
+ * @example
+ * ```tsx
+ * function PaginatedUsers() {
+ *   const { data, isLoading } = usePaginatedApiQuery<User>({
+ *     queryKey: ['users', { page: 0, size: 10 }],
+ *     endpoint: '/users?page=0&size=10',
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {data?.content.map(user => <div key={user.id}>{user.name}</div>)}
+ *       <p>Total: {data?.totalElements}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function usePaginatedApiQuery(options) {
+    return useApiQuery(options);
+}
+/**
+ * Infinite query hook for infinite scrolling with Spring Boot pagination
+ * @template TItem - Type of items in the paginated response
+ * @template TError - Type of the error response
+ *
+ * @example
+ * ```tsx
+ * function InfiniteUsersList() {
+ *   const {
+ *     data,
+ *     fetchNextPage,
+ *     hasNextPage,
+ *     isFetchingNextPage,
+ *   } = useInfiniteApiQuery<User>({
+ *     queryKey: ['users', 'infinite'],
+ *     endpoint: '/users',
+ *     pageSize: 20,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {data?.pages.flatMap(page => page.content).map(user => (
+ *         <div key={user.id}>{user.name}</div>
+ *       ))}
+ *       {hasNextPage && (
+ *         <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>
+ *           {isFetchingNextPage ? 'Loading...' : 'Load More'}
+ *         </button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useInfiniteApiQuery(options) {
+    const fetcher = useApiFetcher();
+    const { queryKey, endpoint, pageSize = 20, pageParam = 'page', sizeParam = 'size', requestConfig, ...queryOptions } = options;
+    // Build endpoint with pagination params
+    const buildEndpoint = (page) => {
+        const separator = endpoint.includes('?') ? '&' : '?';
+        return `${endpoint}${separator}${pageParam}=${page}&${sizeParam}=${pageSize}`;
+    };
+    return useInfiniteQuery({
+        queryKey,
+        queryFn: ({ pageParam: page }) => fetcher(buildEndpoint(page), requestConfig),
+        initialPageParam: 0,
+        getNextPageParam: (lastPage) => {
+            if (lastPage.last)
+                return undefined;
+            return lastPage.number + 1;
+        },
+        getPreviousPageParam: (firstPage) => {
+            if (firstPage.first)
+                return undefined;
+            return firstPage.number - 1;
+        },
+        ...queryOptions,
+    });
+}
+/**
+ * Mutation hook for POST, PUT, PATCH, DELETE operations
+ * @template TData - Type of the response data
+ * @template TVariables - Type of the mutation variables
+ * @template TError - Type of the error response
+ *
+ * @example
+ * ```tsx
+ * function CreateUserForm() {
+ *   const queryClient = useQueryClient();
+ *   const { mutate, isPending } = useApiQueryMutation<User, CreateUserDto>({
+ *     method: 'POST',
+ *     onSuccess: () => {
+ *       queryClient.invalidateQueries({ queryKey: ['users'] });
+ *     },
+ *   });
+ *
+ *   const handleSubmit = (data: CreateUserDto) => {
+ *     mutate({ endpoint: '/users', data });
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       // ...form fields
+ *       <button type="submit" disabled={isPending}>
+ *         {isPending ? 'Creating...' : 'Create User'}
+ *       </button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export function useApiQueryMutation(options) {
+    const api = useApi();
+    const queryClient = useQueryClient();
+    const { method, invalidateKeys, ...mutationOptions } = options;
+    return useMutation({
+        mutationFn: async ({ endpoint, data, config }) => {
+            switch (method) {
+                case 'POST':
+                    return api.post(endpoint, data, config);
+                case 'PUT':
+                    return api.put(endpoint, data, config);
+                case 'PATCH':
+                    return api.patch(endpoint, data, config);
+                case 'DELETE':
+                    return api.delete(endpoint, config);
+                default:
+                    throw new Error(`Unsupported mutation method: ${method}`);
+            }
+        },
+        onSuccess: async () => {
+            // Invalidate specified query keys
+            if (invalidateKeys?.length) {
+                await Promise.all(invalidateKeys.map((key) => queryClient.invalidateQueries({ queryKey: key })));
+            }
+        },
+        ...mutationOptions,
+    });
+}
+/**
+ * Convenience hook for POST mutations
+ */
+export function useApiPostMutation(options) {
+    return useApiQueryMutation({ method: 'POST', ...options });
+}
+/**
+ * Convenience hook for PUT mutations
+ */
+export function useApiPutMutation(options) {
+    return useApiQueryMutation({ method: 'PUT', ...options });
+}
+/**
+ * Convenience hook for PATCH mutations
+ */
+export function useApiPatchMutation(options) {
+    return useApiQueryMutation({ method: 'PATCH', ...options });
+}
+/**
+ * Convenience hook for DELETE mutations
+ */
+export function useApiDeleteMutation(options) {
+    return useApiQueryMutation({ method: 'DELETE', ...options });
+}
+/**
+ * Hook for prefetching data
+ *
+ * @example
+ * ```tsx
+ * function UserLink({ userId }: { userId: string }) {
+ *   const prefetch = useApiPrefetch();
+ *
+ *   return (
+ *     <Link
+ *       to={`/users/${userId}`}
+ *       onMouseEnter={() => prefetch({
+ *         queryKey: ['user', userId],
+ *         endpoint: `/users/${userId}`,
+ *       })}
+ *     >
+ *       View User
+ *     </Link>
+ *   );
+ * }
+ * ```
+ */
+export function useApiPrefetch() {
+    const queryClient = useQueryClient();
+    const fetcher = useApiFetcher();
+    return (options) => {
+        const { queryKey, endpoint, requestConfig, staleTime } = options;
+        return queryClient.prefetchQuery({
+            queryKey,
+            queryFn: () => fetcher(endpoint, requestConfig),
+            staleTime,
+        });
+    };
+}
+/**
+ * Hook for accessing the query client with typed helpers
+ *
+ * @example
+ * ```tsx
+ * function RefreshButton() {
+ *   const { invalidate, setData, removeQueries } = useApiQueryClient();
+ *
+ *   return (
+ *     <button onClick={() => invalidate(['users'])}>
+ *       Refresh Users
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useApiQueryClient() {
+    const queryClient = useQueryClient();
+    return {
+        /** The underlying query client */
+        queryClient,
+        /** Invalidate queries by key */
+        invalidate: (queryKey) => queryClient.invalidateQueries({ queryKey }),
+        /** Set query data directly */
+        setData: (queryKey, data) => queryClient.setQueryData(queryKey, data),
+        /** Get cached query data */
+        getData: (queryKey) => queryClient.getQueryData(queryKey),
+        /** Remove queries from cache */
+        removeQueries: (queryKey) => queryClient.removeQueries({ queryKey }),
+        /** Cancel ongoing queries */
+        cancelQueries: (queryKey) => queryClient.cancelQueries({ queryKey }),
+        /** Refetch queries */
+        refetch: (queryKey) => queryClient.refetchQueries({ queryKey }),
+        /** Reset queries to initial state */
+        resetQueries: (queryKey) => queryClient.resetQueries({ queryKey }),
+    };
+}

package/lib/components/layout/Sidebar.js

@@ -13,9 +13,14 @@ const AppSidebarMenu = () => {
     // Default behavior all items in one ItemGroup
     return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
 };
-const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
+const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = false, comingSoon = false, isSectionHeader = false, }) => {
     const { pathname, linkComponent: Link } = useAppSidebarContext();
     const { t } = useTranslation();
+    const { tLib } = useLibTranslations();
+    // Ensure label is always a string to prevent .charAt() errors in flowbite-react
+    const safeLabel = String(label || '');
+    const translatedLabel = String(t(safeLabel) || safeLabel || '');
+    const translatedBadge = badge ? String(t(badge) || badge || '') : undefined;
     // Check if current path matches this item or any of its descendants
     const isParentActive = href ? pathname === href || pathname.startsWith(`${href}/`) : false;
     // Recursive function to check if any nested child is active
@@ -28,40 +33,69 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
             return false;
         });
     };
+    // Helper to render a single child item (used in multiple places)
+    const renderChildItem = (child) => {
+        const childSafeLabel = String(child.label || '');
+        const childTranslatedLabel = String(t(childSafeLabel) || childSafeLabel || '');
+        // Inline section header - renders as a small label separator (flat, no nesting)
+        if (child.isSectionHeader) {
+            return (_jsxs("div", { className: "pt-3", children: [_jsx("hr", { className: "mb-2 border-t border-gray-200 dark:border-gray-700" }), _jsx("div", { className: "pb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300", children: childTranslatedLabel })] }, child.label));
+        }
+        // Nested items with children - recurse
+        if (child.items?.length) {
+            return (_jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) }, child.label));
+        }
+        // Coming soon item - disabled, no navigation
+        if (child.comingSoon) {
+            return (_jsxs(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal cursor-not-allowed opacity-60', 'text-gray-400 dark:text-gray-500'), disabled: true, children: [childTranslatedLabel, _jsx("span", { className: "rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-medium text-amber-600 dark:bg-amber-900/30 dark:text-amber-400", children: tLib('sidebar.comingSoon', 'Soon') })] }, child.label));
+        }
+        // Regular item with link
+        if (child.href) {
+            return (_jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
+                    'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: childTranslatedLabel }, child.label));
+        }
+        // Item without link (static text)
+        return (_jsx(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 cursor-default', 'dark:text-gray-400'), children: childTranslatedLabel }, child.label));
+    };
+    // Inline section header at top level - renders as a small label separator
+    if (isSectionHeader) {
+        return (_jsxs("div", { className: "pt-3", children: [_jsx("hr", { className: "mb-2 border-t border-gray-200 dark:border-gray-700" }), _jsx("div", { className: "pb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300", children: translatedLabel })] }));
+    }
     // If there's exactly one item, render it as a direct link instead of a dropdown
     if (items?.length === 1 && !forceDropdown) {
         const singleItem = items[0];
         if (!singleItem.href) {
             // If single item has no href, render without link
-            return (_jsx(Sidebar.Item, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(label) }));
+            return (_jsxs(Sidebar.Item, { icon: icon, className: twMerge('text-gray-600 cursor-default', 'dark:text-gray-400'), children: [translatedLabel, translatedBadge && _jsx("span", { className: "text-xs font-medium", children: translatedBadge })] }));
         }
-        return (_jsx(Sidebar.Item, { as: Link, href: singleItem.href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === singleItem.href &&
-                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
+        return (_jsxs(Sidebar.Item, { as: Link, href: singleItem.href, target: target, icon: icon, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === singleItem.href &&
+                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: [translatedLabel, translatedBadge && _jsx("span", { className: "text-xs font-medium", children: translatedBadge })] }));
+    }
+    // Handle non-collapsible sections - render as section header with always-visible links
+    if (items?.length && collapsible === false) {
+        return (_jsxs("div", { className: "space-y-1", children: [showSeparator && _jsx("hr", { className: "my-3 border-t border-gray-200 dark:border-gray-700" }), _jsxs("div", { className: twMerge('flex items-center gap-3 px-3 py-2 text-sm font-semibold uppercase tracking-wider', 'text-gray-500 dark:text-gray-400'), children: [icon && React.createElement(icon, { className: 'h-5 w-5' }), _jsx("span", { children: translatedLabel })] }), _jsx("div", { className: "space-y-1 pl-2", children: items.map((child) => renderChildItem(child)) })] }));
     }
     if (items?.length) {
         const isOpen = isParentActive || hasActiveChild(items);
-        return (_jsx(Sidebar.Collapse, { icon: icon, label: t(label), open: isOpen, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 
+        return (_jsx(Sidebar.Collapse, { icon: icon, label: translatedLabel, open: isOpen, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 
             // Parent styling when its child is active
             hasActiveChild(items) && 'text-primary-700 dark:text-primary-300', 
             // Parent styling when it's directly active
             isParentActive &&
                 !hasActiveChild(items) &&
-                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), theme: { list: 'space-y-2 py-2 [&>li>div]:w-full' }, children: items.map((child) => (_jsx(React.Fragment, { children: child.items?.length ? (
-                // Recursively render nested items
-                _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) })) : child.href ? (
-                // Render leaf item with link
-                _jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
-                        'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) : (
-                // Render leaf item without link
-                _jsx(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(child.label) })) }, child.label))) }));
+                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), theme: { list: 'space-y-2 py-2 [&>li>div]:w-full' }, children: items.map((child) => (_jsx(React.Fragment, { children: renderChildItem(child) }, child.label))) }));
     }
     // Render leaf item
+    // Handle comingSoon leaf item
+    if (comingSoon) {
+        return (_jsx(Sidebar.Item, { icon: icon, className: twMerge('cursor-not-allowed opacity-60', 'text-gray-400 dark:text-gray-500'), children: _jsxs("span", { className: "flex items-center justify-between w-full", children: [t(label), _jsx("span", { className: "rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-medium text-amber-600 dark:bg-amber-900/30 dark:text-amber-400", children: tLib('sidebar.comingSoon', 'Soon') })] }) }));
+    }
     // If no href, render as a non-link item
     if (!href) {
-        return (_jsx(Sidebar.Item, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 'cursor-default'), children: t(label) }));
+        return (_jsxs(Sidebar.Item, { icon: icon, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 'cursor-default'), children: [translatedLabel, translatedBadge && _jsx("span", { className: "text-xs font-medium", children: translatedBadge })] }));
     }
-    return (_jsx(Sidebar.Item, { as: Link, href: href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', isParentActive &&
-            'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
+    return (_jsxs(Sidebar.Item, { as: Link, href: href, target: target, icon: icon, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', isParentActive &&
+            'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: [translatedLabel, translatedBadge && _jsx("span", { className: "text-xs font-medium", children: translatedBadge })] }));
 };
 const AppMobileSidebar = () => {
     const { mobile: { isOpen, close }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();

package/lib/components/ui/Sheet.d.ts

@@ -8,7 +8,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogC
 declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+    side?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }

package/lib/context/SidebarContext.d.ts

@@ -9,6 +9,26 @@ interface AppSidebarPageItem {
     badge?: string;
     roles?: string[];
     forceDropdown?: boolean;
+    /**
+     * When false, the section will not be collapsible - it will display as a
+     * section header with always-visible links below it. Defaults to true.
+     */
+    collapsible?: boolean;
+    /**
+     * When true, displays a horizontal separator line above the section.
+     * Useful for visually separating non-collapsible sections. Defaults to false.
+     */
+    showSeparator?: boolean;
+    /**
+     * When true, the item is shown but disabled with a "Coming Soon" badge.
+     * The link will not be navigable. Defaults to false.
+     */
+    comingSoon?: boolean;
+    /**
+     * When true, renders as an inline section header (small label with separator).
+     * Used for flat organization without nesting. Defaults to false.
+     */
+    isSectionHeader?: boolean;
 }
 /**
  * Props for the AppSidebarContext

package/lib/dashboard-visuals-v2/DashboardWrapperV2.d.ts

@@ -0,0 +1,81 @@
+type FilterValue = string | string[] | Date | null | undefined;
+interface OptionsLabelProps {
+    label: string;
+    value: string;
+}
+interface FilterConfig {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    type?: 'select' | 'multi-select' | 'date' | 'date-range';
+    options?: OptionsLabelProps[];
+    multi?: boolean;
+    query?: string;
+    url?: string;
+    tourUrl?: string;
+    valueKey?: string;
+    rangeKeys?: {
+        start: string;
+        end: string;
+    };
+}
+interface Config {
+    title: string;
+    summary: string;
+    filters: FilterConfig[];
+    tourFilters?: FilterConfig[];
+    themeColor?: string;
+}
+export interface MetricsDataProps {
+    id: number;
+    gridColSpan?: number;
+    metricData: any;
+}
+export interface VisualDataProps {
+    id: number;
+    sectionTitle: string;
+    data: MetricsDataProps[];
+}
+export interface DashboardApiPaths {
+    query: string;
+    metrics: string;
+}
+export interface DashboardWrapperV2Props {
+    data: {
+        config: Config;
+        visualData: VisualDataProps[];
+        eventsVisualData?: VisualDataProps[];
+    };
+    showVisualHeader?: boolean;
+    showEventsTabbedLayout?: boolean;
+    handleFilterChange?: (name: string, value: FilterValue) => void;
+    handleTourFilterChange?: (name: string, value: FilterValue) => void;
+    selectedFilters?: Record<string, FilterValue>;
+    tourSelectedFilters?: Record<string, FilterValue>;
+    resetFilters?: () => void;
+    handleApplyFilters?: () => void;
+    handleApplyTourFilters?: () => void;
+    apiPaths?: DashboardApiPaths;
+    /** Custom className for wrapper */
+    className?: string;
+    /** Custom classNames for sub-elements */
+    classNames?: {
+        header?: string;
+        title?: string;
+        summary?: string;
+        section?: string;
+        sectionTitle?: string;
+        grid?: string;
+        visual?: string;
+    };
+    /** Gap between visuals in grid (Tailwind gap class number) */
+    gridGap?: number;
+    /** Whether to use full-width layout */
+    fullWidth?: boolean;
+}
+/**
+ * DashboardWrapperV2 Component
+ * Drop-in replacement for DashboardWrapper using ApexCharts
+ */
+export declare function DashboardWrapperV2({ data, showVisualHeader, showEventsTabbedLayout, handleFilterChange: externalHandleFilterChange, selectedFilters, tourSelectedFilters, resetFilters, handleApplyFilters, handleApplyTourFilters, handleTourFilterChange, apiPaths, className, classNames, gridGap, fullWidth, }: DashboardWrapperV2Props): import("react/jsx-runtime").JSX.Element;
+export default DashboardWrapperV2;