@pagamio/frontend-commons-lib 0.8.213 → 0.8.214

package/lib/dashboard-visuals-v2/DashboardWrapperV2.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @fileoverview DashboardWrapperV2 - Main dashboard component using ApexCharts
+ * Drop-in replacement for V1 DashboardWrapper with improved performance
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useApi } from '../api';
+import { FilterComponent, Tab } from '../components';
+import { cn } from '../helpers';
+import { useMediaQueries } from '../shared';
+import visualRegistryV2, { isRegisteredVisual } from './visualRegistry';
+const defaultDashboardApiPaths = {
+    query: '/analytics/query',
+    metrics: '/analytics/metrics',
+};
+// Helper to get grid span from column count
+const getGridColSpan = (numVisuals, visualId) => {
+    if (numVisuals === 1)
+        return 12;
+    if (numVisuals === 2)
+        return 6;
+    if (numVisuals === 3)
+        return 4;
+    if (numVisuals === 4)
+        return 3;
+    // For > 4 visuals, use 4 columns layout
+    return 3;
+};
+// Helper to extract filter options from response
+const getFilterOptionsData = (response, key, valueKey) => {
+    const optionsData = response.map((item) => {
+        const record = item;
+        const value = valueKey ? record[valueKey] : record[key];
+        const label = record.label || record.name || value;
+        return {
+            value: String(value ?? ''),
+            label: String(label ?? ''),
+        };
+    });
+    return { optionsData };
+};
+/**
+ * DashboardWrapperV2 Component
+ * Drop-in replacement for DashboardWrapper using ApexCharts
+ */
+export function DashboardWrapperV2({ data, showVisualHeader = true, showEventsTabbedLayout = false, handleFilterChange: externalHandleFilterChange, selectedFilters = {}, tourSelectedFilters = {}, resetFilters = () => { }, handleApplyFilters = () => { }, handleApplyTourFilters = () => { }, handleTourFilterChange = () => { }, apiPaths = defaultDashboardApiPaths, className, classNames, gridGap = 4, fullWidth = false, }) {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [tourError, setTourError] = useState(null);
+    const [refreshCount, setRefreshCount] = useState(0);
+    const [filterOptions, setFilterOptions] = useState({});
+    const [tourFilterOptions, setTourFilterOptions] = useState({});
+    const { isSm, isXs } = useMediaQueries();
+    const apiClient = useApi();
+    const { config, visualData, eventsVisualData } = data;
+    // Handle filter change with default fallback
+    const handleFilterChange = externalHandleFilterChange ?? (() => { });
+    // Fetch filter options
+    const fetchFilterData = async (key, valueKey, url, query, isTourFilter = false) => {
+        try {
+            setLoading(true);
+            if (isTourFilter) {
+                setTourError(null);
+            }
+            else {
+                setError(null);
+            }
+            const response = await apiClient.post(url, query);
+            if (response) {
+                const { optionsData } = getFilterOptionsData(response, key, valueKey);
+                if (isTourFilter) {
+                    setTourFilterOptions((prev) => ({ ...prev, [key]: optionsData }));
+                }
+                else {
+                    setFilterOptions((prev) => ({ ...prev, [key]: optionsData }));
+                }
+            }
+        }
+        catch (err) {
+            const errorMessage = 'Failed to fetch filter data';
+            if (isTourFilter) {
+                setTourError(err instanceof Error ? err : new Error(errorMessage));
+            }
+            else {
+                setError(err instanceof Error ? err : new Error(errorMessage));
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        const fetchFilters = (filters, isTour = false) => {
+            filters.forEach((filter) => {
+                if (filter.query) {
+                    const defaultQueryUrl = apiPaths.query;
+                    const queryUrl = isTour ? (filter.tourUrl ?? defaultQueryUrl) : (filter.url ?? defaultQueryUrl);
+                    fetchFilterData(filter.name, filter.valueKey, queryUrl, filter.query, isTour);
+                }
+            });
+        };
+        fetchFilters(config.filters);
+        if (config.tourFilters) {
+            fetchFilters(config.tourFilters, true);
+        }
+    }, [config.filters, refreshCount, apiPaths]);
+    const handleRetry = () => setRefreshCount((prev) => prev + 1);
+    // Build dashboard filters with custom date range support
+    const dashboardFilters = useMemo(() => {
+        const baseFilters = [...config.filters];
+        const dateRangeValue = typeof selectedFilters?.dateRange === 'string' ? selectedFilters.dateRange.toUpperCase() : '';
+        if (dateRangeValue === 'CUSTOM_RANGE') {
+            baseFilters.push({
+                name: 'customDateRange',
+                label: 'Custom Date Range',
+                placeholder: 'Select date range',
+                type: 'date-range',
+                options: [],
+                multi: false,
+                rangeKeys: { start: 'startDate', end: 'endDate' },
+            });
+        }
+        return baseFilters;
+    }, [config.filters, selectedFilters?.dateRange]);
+    // Resolve filter type
+    const resolveFilterType = (filter) => {
+        if (filter.type === 'date-range')
+            return 'date-range';
+        if (filter.type === 'date')
+            return 'date';
+        if (filter.type === 'multi-select')
+            return 'multi-select';
+        if (filter.type === 'select')
+            return 'select';
+        return filter.multi ? 'multi-select' : 'select';
+    };
+    // Render filter component
+    const renderFilters = (filters, options, selected, onChange, onApply, filterError) => {
+        if (loading) {
+            return (_jsx("div", { className: "mb-5 p-4 bg-white rounded-lg border border-gray-200 animate-pulse", children: _jsx("div", { className: "flex gap-4", children: Array.from({ length: 3 })
+                        .map((value, index) => {
+                        void value;
+                        return index;
+                    })
+                        .map((skeletonIndex) => (_jsx("div", { className: "h-10 bg-gray-200 rounded w-40" }, skeletonIndex))) }) }));
+        }
+        if (filterError) {
+            return (_jsxs("div", { className: "mb-5 p-4 bg-red-50 rounded-lg border border-red-200", children: [_jsx("p", { className: "text-red-600", children: filterError.message }), _jsx("button", { onClick: handleRetry, className: "mt-2 px-4 py-2 bg-red-100 text-red-700 rounded hover:bg-red-200", children: "Retry" })] }));
+        }
+        return (_jsx(FilterComponent, { filters: filters.map((filter) => ({
+                name: filter.name,
+                placeholder: filter.placeholder ?? `Select ${filter.name}`,
+                type: resolveFilterType(filter),
+                options: options[filter.name] || filter.options || [],
+                rangeKeys: filter.rangeKeys,
+            })), showClearFilters: true, selectedFilters: selected, handleFilterChange: onChange, handleApplyFilters: onApply, resetFilters: resetFilters, isNarrow: isSm }));
+    };
+    // Render a single visual
+    const renderVisual = useCallback((visual, sectionTitle, span) => {
+        const { metricData } = visual;
+        const matchesSmall = isXs || isSm;
+        const VisualComponent = visualRegistryV2[metricData.type];
+        if (!VisualComponent) {
+            if (!isRegisteredVisual(metricData.type)) {
+                console.warn(`[DashboardWrapperV2] Visual type "${metricData.type}" not found in V2 registry. ` +
+                    `Available types: ${Object.keys(visualRegistryV2).join(', ')}`);
+            }
+            return null;
+        }
+        // Determine API URL based on component type
+        const isTileType = metricData.type === 'Tile' || metricData.type === 'StatCard' || metricData.type === 'MetricCard';
+        const defaultUrl = isTileType ? apiPaths.metrics : apiPaths.query;
+        const url = metricData.url || defaultUrl;
+        // Build props compatible with V2 components
+        const props = {
+            // Common props
+            data: metricData.data,
+            title: metricData.title,
+            colors: metricData.colors,
+            // Chart-specific props
+            series: metricData.series,
+            categories: metricData.categories,
+            stacked: metricData.stacked,
+            // Card-specific props
+            value: metricData.value,
+            icon: metricData.icon,
+            trend: metricData.trend,
+            trendValue: metricData.trendValue,
+            // Additional props from metricData
+            ...metricData,
+            // Override with computed values
+            url,
+            themeColor: config.themeColor,
+        };
+        // Calculate grid span class
+        const colSpan = matchesSmall ? 12 : (visual.gridColSpan ?? span);
+        const colSpanClass = `col-span-${colSpan}`;
+        return (_jsx("div", { className: cn(colSpanClass, classNames?.visual), children: _jsx(VisualComponent, { ...props }) }, `visual-${sectionTitle}-${visual.id}`));
+    }, [config.themeColor, isXs, isSm, apiPaths, classNames?.visual]);
+    // Render visual sections
+    const renderSections = (sections) => (_jsx("main", { children: sections.map((section) => (_jsxs("div", { className: cn('mb-4', classNames?.section), children: [section.sectionTitle && (_jsx("h2", { className: cn('mb-3 text-lg font-semibold text-gray-900', classNames?.sectionTitle), children: section.sectionTitle })), _jsx("div", { className: cn('grid grid-cols-12', `gap-${gridGap}`, classNames?.grid), children: section.data.map((visual) => {
+                        const numVisuals = section.data.length;
+                        const span = getGridColSpan(numVisuals, visual.id);
+                        return renderVisual(visual, section.sectionTitle, span);
+                    }) })] }, section.id))) }));
+    // Overview tab content
+    const overviewContent = (_jsxs(_Fragment, { children: [renderFilters(dashboardFilters, filterOptions, selectedFilters, handleFilterChange, handleApplyFilters, error), renderSections(visualData)] }));
+    // Events/Tour tab content
+    const eventsContent = eventsVisualData ? (_jsxs(_Fragment, { children: [renderFilters(config.tourFilters || [], tourFilterOptions, tourSelectedFilters, handleTourFilterChange, handleApplyTourFilters, tourError), renderSections(eventsVisualData)] })) : null;
+    // Tab configuration
+    const tabs = [
+        { id: 1, title: 'Overview', content: overviewContent },
+        { id: 2, title: 'Tour', content: eventsContent },
+    ];
+    return (_jsxs("div", { className: cn(fullWidth ? 'w-full' : 'max-w-7xl mx-auto', className), children: [showVisualHeader && (_jsxs("div", { className: cn('mb-6', classNames?.header), children: [_jsx("h1", { className: cn('text-2xl font-bold text-gray-900', classNames?.title), children: config.title }), _jsx("p", { className: cn('text-gray-600 mt-1', classNames?.summary), children: config.summary })] })), showEventsTabbedLayout ? _jsx(Tab, { tabs: tabs, defaultTab: 0, className: "justify-end" }) : overviewContent] }));
+}
+export default DashboardWrapperV2;

package/lib/dashboard-visuals-v2/cards/CardGrid.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @fileoverview Card Grid component - Responsive card layout
+ */
+import React from 'react';
+import type { CardGridProps } from '../types';
+/**
+ * Card Grid component
+ * Responsive grid layout for stat/metric cards
+ */
+export declare function CardGrid({ children, columns, gap, className, }: CardGridProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pre-configured grid layouts
+ */
+export declare const StatCardGrid: ({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const MetricCardGrid: ({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardGrid;

package/lib/dashboard-visuals-v2/cards/CardGrid.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../helpers';
+/**
+ * Card Grid component
+ * Responsive grid layout for stat/metric cards
+ */
+export function CardGrid({ children, columns = { default: 1, sm: 2, md: 3, lg: 4 }, gap = 4, className, }) {
+    // Build column classes
+    const columnClasses = [
+        columns.default && `grid-cols-${columns.default}`,
+        columns.sm && `sm:grid-cols-${columns.sm}`,
+        columns.md && `md:grid-cols-${columns.md}`,
+        columns.lg && `lg:grid-cols-${columns.lg}`,
+        columns.xl && `xl:grid-cols-${columns.xl}`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Gap class
+    const gapClass = `gap-${gap}`;
+    return _jsx("div", { className: cn('grid', columnClasses, gapClass, className), children: children });
+}
+/**
+ * Pre-configured grid layouts
+ */
+export const StatCardGrid = ({ children, className }) => (_jsx(CardGrid, { columns: { default: 1, sm: 2, lg: 4 }, gap: 4, className: className, children: children }));
+export const MetricCardGrid = ({ children, className }) => (_jsx(CardGrid, { columns: { default: 1, md: 2, lg: 3 }, gap: 6, className: className, children: children }));
+export default CardGrid;

package/lib/dashboard-visuals-v2/cards/InfoCard.d.ts

@@ -0,0 +1,7 @@
+import type { InfoCardProps } from '../types';
+/**
+ * Info Card component
+ * Flexible card for displaying various content types
+ */
+export declare function InfoCard({ title, value, description, icon, badge, badgeVariant, footer, children, loading, error, onClick, className, classNames, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+export default InfoCard;

package/lib/dashboard-visuals-v2/cards/InfoCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../helpers';
+/**
+ * Info Card component
+ * Flexible card for displaying various content types
+ */
+export function InfoCard({ title, value, description, icon, badge, badgeVariant = 'default', footer, children, loading = false, error, onClick, className, classNames, }) {
+    // Badge variant classes
+    const badgeClasses = {
+        default: 'bg-gray-100 text-gray-700',
+        primary: 'bg-blue-100 text-blue-700',
+        success: 'bg-green-100 text-green-700',
+        warning: 'bg-amber-100 text-amber-700',
+        danger: 'bg-red-100 text-red-700',
+    };
+    // Loading state
+    if (loading) {
+        return (_jsx("div", { className: cn('rounded-xl bg-white border border-gray-200 p-4 shadow-sm animate-pulse', className, classNames?.container), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-200" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-1/3" }), _jsx("div", { className: "h-6 bg-gray-200 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-gray-200 rounded w-2/3" })] })] }) }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: cn('rounded-xl border border-red-200 bg-red-50 p-4 shadow-sm', className, classNames?.container), children: _jsx("p", { className: "text-red-600 text-sm", children: "Error loading data" }) }));
+    }
+    return (_jsxs("div", { className: cn('rounded-xl bg-white border border-gray-200 p-4 shadow-sm transition-all duration-200', onClick && 'cursor-pointer hover:shadow-md hover:border-gray-300', className, classNames?.container), onClick: onClick, children: [_jsxs("div", { className: "flex items-start gap-3", children: [icon && (_jsx("div", { className: cn('w-10 h-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0', classNames?.icon), children: icon })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [title && _jsx("p", { className: cn('text-sm font-medium text-gray-500', classNames?.title), children: title }), value && _jsx("p", { className: cn('text-xl font-bold text-gray-900 mt-0.5', classNames?.value), children: value })] }), badge && (_jsx("span", { className: cn('px-2 py-1 rounded-full text-xs font-medium', badgeClasses[badgeVariant]), children: badge }))] }), description && _jsx("p", { className: "text-sm text-gray-600 mt-2", children: description })] })] }), children && _jsx("div", { className: "mt-4", children: children }), footer && _jsx("div", { className: "mt-4 pt-3 border-t border-gray-100", children: footer })] }));
+}
+export default InfoCard;

package/lib/dashboard-visuals-v2/cards/MetricCard.d.ts

@@ -0,0 +1,7 @@
+import type { MetricCardProps } from '../types';
+/**
+ * Metric Card component
+ * Displays metric with optional sparkline chart
+ */
+export declare function MetricCard({ title, value, icon, trend, trendValue, trendLabel, sparklineData, sparklineColor, subtitle, action, loading, error, className, classNames, }: MetricCardProps): import("react/jsx-runtime").JSX.Element;
+export default MetricCard;

package/lib/dashboard-visuals-v2/cards/MetricCard.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../helpers';
+import { AreaChart } from '../charts/AreaChart';
+/**
+ * Metric Card component
+ * Displays metric with optional sparkline chart
+ */
+export function MetricCard({ title, value, icon, trend, trendValue, trendLabel, sparklineData, sparklineColor = '#3B82F6', subtitle, action, loading = false, error, className, classNames, }) {
+    // Loading state
+    if (loading) {
+        return (_jsxs("div", { className: cn('rounded-xl bg-white border border-gray-200 p-4 shadow-sm animate-pulse', className, classNames?.container), children: [_jsxs("div", { className: "flex items-start justify-between mb-4", children: [_jsxs("div", { className: "space-y-2 flex-1", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-gray-200 rounded w-1/2" })] }), _jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-200" })] }), _jsx("div", { className: "h-16 bg-gray-200 rounded" })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: cn('rounded-xl border border-red-200 bg-red-50 p-4 shadow-sm', className, classNames?.container), children: _jsx("p", { className: "text-red-600 text-sm", children: "Error loading metric" }) }));
+    }
+    // Trend classes
+    const trendClasses = {
+        up: 'text-green-600 bg-green-50',
+        down: 'text-red-600 bg-red-50',
+        neutral: 'text-gray-600 bg-gray-50',
+    };
+    return (_jsxs("div", { className: cn('rounded-xl bg-white border border-gray-200 p-4 shadow-sm', className, classNames?.container), children: [_jsxs("div", { className: "flex items-start justify-between mb-3", children: [_jsxs("div", { children: [_jsx("p", { className: cn('text-sm font-medium text-gray-500', classNames?.title), children: title }), _jsxs("div", { className: "flex items-baseline gap-2 mt-1", children: [_jsx("p", { className: cn('text-2xl font-bold text-gray-900', classNames?.value), children: value }), trend && trendValue && (_jsxs("span", { className: cn('px-2 py-0.5 rounded-full text-xs font-medium', trendClasses[trend]), children: [trend === 'up' ? '↑' : trend === 'down' ? '↓' : '', trendValue] }))] }), (trendLabel || subtitle) && _jsx("p", { className: "text-xs text-gray-500 mt-1", children: trendLabel || subtitle })] }), icon && (_jsx("div", { className: cn('w-10 h-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center', classNames?.icon), children: icon }))] }), sparklineData && sparklineData.length > 0 && (_jsx("div", { className: "h-16 -mx-2 -mb-2", children: _jsx(AreaChart, { data: sparklineData.map((v, i) => ({ label: i.toString(), value: v })), style: { height: 64 }, apexOptions: {
+                        chart: {
+                            sparkline: { enabled: true },
+                            toolbar: { show: false },
+                        },
+                        colors: [sparklineColor],
+                        xaxis: { labels: { show: false } },
+                        yaxis: { labels: { show: false } },
+                        tooltip: { enabled: false },
+                        stroke: { width: 2 },
+                        legend: { show: false },
+                        grid: { show: false },
+                    } }) })), action && _jsx("div", { className: "mt-3 pt-3 border-t border-gray-100", children: action })] }));
+}
+export default MetricCard;

package/lib/dashboard-visuals-v2/cards/StatCard.d.ts

@@ -0,0 +1,7 @@
+import type { StatCardProps } from '../types';
+/**
+ * Stat Card component
+ * Displays a single metric with optional trend indicator
+ */
+export declare function StatCard({ title, value, icon, trend, trendValue, trendLabel, description, variant, size, loading, error, onClick, className, classNames, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export default StatCard;

package/lib/dashboard-visuals-v2/cards/StatCard.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview Stat Card component - Single metric display
+ */
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import React from 'react';
+import { cn } from '../../helpers';
+/**
+ * Stat Card component
+ * Displays a single metric with optional trend indicator
+ */
+export function StatCard({ title, value, icon, trend, trendValue, trendLabel, description, variant = 'default', size = 'md', loading = false, error, onClick, className, classNames, }) {
+    // Size classes
+    const sizeClasses = {
+        sm: {
+            container: 'p-3',
+            title: 'text-xs',
+            value: 'text-xl',
+            icon: 'w-8 h-8',
+            iconInner: 'w-4 h-4',
+        },
+        md: {
+            container: 'p-4',
+            title: 'text-sm',
+            value: 'text-2xl',
+            icon: 'w-10 h-10',
+            iconInner: 'w-5 h-5',
+        },
+        lg: {
+            container: 'p-6',
+            title: 'text-base',
+            value: 'text-3xl',
+            icon: 'w-12 h-12',
+            iconInner: 'w-6 h-6',
+        },
+    };
+    // Variant classes
+    const variantClasses = {
+        default: 'bg-white border border-gray-200',
+        primary: 'bg-blue-50 border border-blue-200',
+        success: 'bg-green-50 border border-green-200',
+        warning: 'bg-amber-50 border border-amber-200',
+        danger: 'bg-red-50 border border-red-200',
+        gradient: 'bg-gradient-to-br from-blue-500 to-purple-600 text-white',
+        // Solid colored variants for dashboard cards
+        'primary-solid': 'bg-blue-500 text-white border-0',
+        'success-solid': 'bg-emerald-500 text-white border-0',
+        'warning-solid': 'bg-amber-500 text-white border-0',
+        'danger-solid': 'bg-red-500 text-white border-0',
+        'purple-solid': 'bg-indigo-500 text-white border-0',
+        'orange-solid': 'bg-orange-500 text-white border-0',
+    };
+    // Icon background classes
+    const iconBgClasses = {
+        default: 'bg-gray-100 text-gray-600',
+        primary: 'bg-blue-100 text-blue-600',
+        success: 'bg-green-100 text-green-600',
+        warning: 'bg-amber-100 text-amber-600',
+        danger: 'bg-red-100 text-red-600',
+        gradient: 'bg-white/20 text-white',
+        // Solid variant icon backgrounds
+        'primary-solid': 'bg-white/20 text-white',
+        'success-solid': 'bg-white/20 text-white',
+        'warning-solid': 'bg-white/20 text-white',
+        'danger-solid': 'bg-white/20 text-white',
+        'purple-solid': 'bg-white/20 text-white',
+        'orange-solid': 'bg-white/20 text-white',
+    };
+    // Trend classes
+    const trendClasses = {
+        up: 'text-green-600',
+        down: 'text-red-600',
+        neutral: 'text-gray-500',
+    };
+    const sizes = sizeClasses[size];
+    // Loading state
+    if (loading) {
+        return (_jsx("div", { className: cn('rounded-xl shadow-sm animate-pulse', sizes.container, variantClasses[variant], className, classNames?.container), children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "space-y-3 flex-1", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-gray-200 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-gray-200 rounded w-2/3" })] }), _jsx("div", { className: cn('rounded-lg bg-gray-200', sizes.icon) })] }) }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: cn('rounded-xl shadow-sm border border-red-200 bg-red-50', sizes.container, className, classNames?.container), children: _jsx("div", { className: "flex items-center gap-2 text-red-600", children: _jsx("span", { className: "text-sm", children: "Error loading data" }) }) }));
+    }
+    // Helper to check if variant is a solid color
+    const isSolidVariant = variant.endsWith('-solid') || variant === 'gradient';
+    return (_jsx("div", { className: cn('rounded-xl shadow-sm transition-all duration-200', onClick && 'cursor-pointer hover:shadow-md', sizes.container, variantClasses[variant] || variantClasses.default, className, classNames?.container), onClick: onClick, children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: cn('font-medium', sizes.title, isSolidVariant ? 'text-white/80' : 'text-gray-500', classNames?.title), children: title }), _jsx("p", { className: cn('font-bold tracking-tight', sizes.value, isSolidVariant ? 'text-white' : 'text-gray-900', classNames?.value), children: value }), _jsxs("div", { className: "flex items-center gap-2 mt-2", children: [trend && trendValue && (_jsxs("span", { className: cn('inline-flex items-center gap-1 text-xs font-medium', isSolidVariant ? (trend === 'up' ? 'text-white' : 'text-white/90') : trendClasses[trend], classNames?.trend), children: [trend === 'up' && _jsx(TrendingUp, { className: "w-3 h-3" }), trend === 'down' && _jsx(TrendingDown, { className: "w-3 h-3" }), trendValue] })), (trendLabel || description) && (_jsx("span", { className: cn('text-xs', isSolidVariant ? 'text-white/60' : 'text-gray-500'), children: trendLabel || description }))] })] }), icon && (_jsx("div", { className: cn('rounded-lg flex items-center justify-center flex-shrink-0', sizes.icon, iconBgClasses[variant] || iconBgClasses.default, classNames?.icon), children: React.isValidElement(icon)
+                        ? React.cloneElement(icon, {
+                            className: cn(sizes.iconInner, icon.props?.className),
+                        })
+                        : icon }))] }) }));
+}
+export default StatCard;

package/lib/dashboard-visuals-v2/cards/TopItemsCard.d.ts

@@ -0,0 +1,7 @@
+import type { TopItemsCardProps } from '../types';
+/**
+ * Top Items Card component
+ * Displays a ranked list with progress bars
+ */
+export declare function TopItemsCard<TItem extends Record<string, unknown>>({ title, items, labelKey, valueKey, renderLabel, renderValue, showRank, showProgress, progressColor, maxItems, loading, error, className, classNames, }: TopItemsCardProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export default TopItemsCard;

package/lib/dashboard-visuals-v2/cards/TopItemsCard.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../helpers';
+/**
+ * Top Items Card component
+ * Displays a ranked list with progress bars
+ */
+export function TopItemsCard({ title, items, labelKey, valueKey, renderLabel, renderValue, showRank = true, showProgress = true, progressColor = '#3B82F6', maxItems = 5, loading = false, error, className, classNames, }) {
+    // Loading state
+    if (loading) {
+        return (_jsxs("div", { className: cn('rounded-xl bg-white border border-gray-200 p-4 shadow-sm', className, classNames?.container), children: [_jsx("div", { className: "h-5 bg-gray-200 rounded w-1/3 mb-4 animate-pulse" }), _jsx("div", { className: "space-y-4", children: Array.from({ length: 3 })
+                        .map((value, index) => {
+                        void value;
+                        return index;
+                    })
+                        .map((skeletonIndex) => (_jsxs("div", { className: "animate-pulse", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-1/3" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-16" })] }), _jsx("div", { className: "h-2 bg-gray-200 rounded-full" })] }, skeletonIndex))) })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: cn('rounded-xl border border-red-200 bg-red-50 p-4 shadow-sm', className, classNames?.container), children: _jsx("p", { className: "text-red-600 text-sm", children: "Error loading data" }) }));
+    }
+    const displayItems = items.slice(0, maxItems);
+    const maxValue = Math.max(...displayItems.map((item) => Number(item[valueKey]) || 0));
+    return (_jsxs("div", { className: cn('rounded-xl bg-white border border-gray-200 p-4 shadow-sm', className, classNames?.container), children: [_jsx("h3", { className: cn('font-semibold text-gray-900 mb-4', classNames?.title), children: title }), _jsx("div", { className: "space-y-4", children: displayItems.length === 0 ? (_jsx("div", { className: "text-center text-gray-500 py-4", children: "No data available" })) : (displayItems.map((item, index) => {
+                    const value = Number(item[valueKey]) || 0;
+                    const progress = maxValue > 0 ? (value / maxValue) * 100 : 0;
+                    const label = renderLabel ? renderLabel(item, index) : String(item[labelKey] ?? '');
+                    const displayValue = renderValue ? renderValue(item, index) : value.toLocaleString();
+                    return (_jsxs("div", { className: classNames?.item, children: [_jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [showRank && _jsxs("span", { className: "text-xs font-medium text-gray-400 w-5", children: ["#", index + 1] }), _jsx("span", { className: "text-sm font-medium text-gray-700 truncate", children: label })] }), _jsx("span", { className: "text-sm font-semibold text-gray-900", children: displayValue })] }), showProgress && (_jsx("div", { className: "h-2 bg-gray-100 rounded-full overflow-hidden", children: _jsx("div", { className: "h-full rounded-full transition-all duration-500", style: {
+                                        width: `${progress}%`,
+                                        backgroundColor: progressColor,
+                                    } }) }))] }, index));
+                })) })] }));
+}
+export default TopItemsCard;

package/lib/dashboard-visuals-v2/cards/TransactionListCard.d.ts

@@ -0,0 +1,7 @@
+import type { TransactionListCardProps } from '../types';
+/**
+ * Transaction List Card component
+ * Displays a list of transactions or activity items
+ */
+export declare function TransactionListCard<TItem extends Record<string, unknown>>({ title, items, renderItem, keyExtractor, maxItems, emptyMessage, viewAllLabel, onViewAll, loading, error, className, classNames, }: TransactionListCardProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export default TransactionListCard;

package/lib/dashboard-visuals-v2/cards/TransactionListCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../helpers';
+/**
+ * Transaction List Card component
+ * Displays a list of transactions or activity items
+ */
+export function TransactionListCard({ title, items, renderItem, keyExtractor, maxItems = 5, emptyMessage = 'No items to display', viewAllLabel = 'View All', onViewAll, loading = false, error, className, classNames, }) {
+    // Loading state
+    if (loading) {
+        return (_jsxs("div", { className: cn('rounded-xl bg-white border border-gray-200 p-4 shadow-sm', className, classNames?.container), children: [_jsx("div", { className: "h-5 bg-gray-200 rounded w-1/3 mb-4 animate-pulse" }), _jsx("div", { className: "space-y-3", children: Array.from({ length: 3 })
+                        .map((value, index) => {
+                        void value;
+                        return index;
+                    })
+                        .map((skeletonIndex) => (_jsxs("div", { className: "flex items-center gap-3 animate-pulse", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-gray-200" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-gray-200 rounded w-1/3" })] }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-16" })] }, skeletonIndex))) })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: cn('rounded-xl border border-red-200 bg-red-50 p-4 shadow-sm', className, classNames?.container), children: _jsx("p", { className: "text-red-600 text-sm", children: "Error loading transactions" }) }));
+    }
+    const displayItems = items.slice(0, maxItems);
+    return (_jsxs("div", { className: cn('rounded-xl bg-white border border-gray-200 shadow-sm', className, classNames?.container), children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100", children: [_jsx("h3", { className: cn('font-semibold text-gray-900', classNames?.title), children: title }), onViewAll && items.length > maxItems && (_jsx("button", { onClick: onViewAll, className: "text-sm text-blue-600 hover:text-blue-700 font-medium", children: viewAllLabel }))] }), _jsx("div", { className: cn('divide-y divide-gray-100', classNames?.list), children: displayItems.length === 0 ? (_jsx("div", { className: "px-4 py-8 text-center text-gray-500", children: emptyMessage })) : (displayItems.map((item, index) => (_jsx("div", { className: cn('px-4 py-3', classNames?.item), children: renderItem(item, index) }, keyExtractor ? keyExtractor(item, index) : index)))) })] }));
+}
+export default TransactionListCard;

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

@@ -0,0 +1,9 @@
+/**
+ * @fileoverview Cards index - Export all card components
+ */
+export { StatCard } from './StatCard';
+export { MetricCard } from './MetricCard';
+export { InfoCard } from './InfoCard';
+export { CardGrid, StatCardGrid, MetricCardGrid } from './CardGrid';
+export { TransactionListCard } from './TransactionListCard';
+export { TopItemsCard } from './TopItemsCard';

package/lib/dashboard-visuals-v2/cards/index.js

@@ -0,0 +1,9 @@
+/**
+ * @fileoverview Cards index - Export all card components
+ */
+export { StatCard } from './StatCard';
+export { MetricCard } from './MetricCard';
+export { InfoCard } from './InfoCard';
+export { CardGrid, StatCardGrid, MetricCardGrid } from './CardGrid';
+export { TransactionListCard } from './TransactionListCard';
+export { TopItemsCard } from './TopItemsCard';

package/lib/dashboard-visuals-v2/charts/AreaChart.d.ts

@@ -0,0 +1,7 @@
+import type { AreaChartProps, ChartDataPoint } from '../types';
+/**
+ * Area Chart component
+ * Line chart with filled area underneath
+ */
+export declare function AreaChart<TData extends ChartDataPoint = ChartDataPoint>({ data, series: providedSeries, categories: providedCategories, xKey, yKey, yKeys, seriesNames, curve, strokeWidth, showMarkers, markerSize, fillOpacity, gradient, style, tooltip, xAxis, yAxis, apexOptions, onDataPointClick, ...baseProps }: AreaChartProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default AreaChart;