@pagamio/frontend-commons-lib 0.8.217 → 0.8.218

package/lib/api/index.d.ts

@@ -1,6 +1,4 @@
 export * from './client';
 export * from './swr';
-export * from './tanstackQuery';
-export * from './TanstackQueryProvider';
 export * from './context';
 export * from './types';

package/lib/api/index.js

@@ -1,6 +1,4 @@
 export * from './client';
 export * from './swr';
-export * from './tanstackQuery';
-export * from './TanstackQueryProvider';
 export * from './context';
 export * from './types';

package/lib/components/layout/Sidebar.js

@@ -13,14 +13,9 @@ 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, collapsible = true, showSeparator = false, comingSoon = false, isSectionHeader = false, }) => {
+const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = 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
@@ -33,69 +28,51 @@ 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 (_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, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 cursor-default', 'dark:text-gray-400'), 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 })] }));
+        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) }));
     }
     // 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)) })] }));
+        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: t(label) })] }), _jsx("div", { className: "space-y-1 pl-2", 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))) })] }));
     }
     if (items?.length) {
         const isOpen = isParentActive || hasActiveChild(items);
-        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', 
+        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', 
             // 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: renderChildItem(child) }, 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: 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))) }));
     }
     // 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 (_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, { 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, { 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 })] }));
+    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) }));
 };
 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?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | 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

@@ -19,16 +19,6 @@ interface AppSidebarPageItem {
      * 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/index.js

@@ -7,7 +7,7 @@ import { FilterComponent, Tab } from '../components';
 import { useMediaQueries } from '../shared';
 import ErrorState from './components/ErrorState';
 import FilterComponentSkeleton from './components/FilterComponentSkeleton';
-import { DashboardPaths, defaultDashboardApiPaths, getFilterOptionsData, getGridColProps, } from './utils';
+import { defaultDashboardApiPaths, getFilterOptionsData, getGridColProps } from './utils';
 import componentRegistry from './visualRegistry';
 const OverviewContent = ({ visualData, renderContent, renderVisual }) => {
     return (_jsxs(_Fragment, { children: [renderContent(), _jsx("main", { children: visualData.map((section) => (_jsxs("div", { className: "mb-2", children: [section.sectionTitle && _jsx("h2", { className: "mb-2 text-1xl font-semibold", children: section.sectionTitle }), _jsx(Grid, { gutter: "md", align: "stretch", className: "mb-[6px]", children: section.data.map((visual) => {
@@ -170,15 +170,9 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
             return null;
         }
         // Determine URL based on component type and custom apiPaths
-        // Priority:
-        // 1. metricData.url (Specific override)
-        // 2. apiPaths.metrics/query (Configured path)
-        // 3. DashboardPaths.METRICS/QUERY (Library default)
+        // If metricData already has a custom url, use it; otherwise use apiPaths
         const isTileType = metricData.type === 'Tile' || metricData.type === 'MetricSummaryCard';
-        // Determine the API path or fallback default
-        const defaultPath = isTileType ? DashboardPaths.METRICS : DashboardPaths.QUERY;
-        const apiPath = isTileType ? apiPaths.metrics : apiPaths.query;
-        const defaultUrl = apiPath || defaultPath;
+        const defaultUrl = isTileType ? apiPaths.metrics : apiPaths.query;
         const url = metricData.url || defaultUrl;
         const props = {
             data: metricData.data,
@@ -193,7 +187,6 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
             currencyDisplaySymbol: metricData.currencyDisplaySymbol,
             ...metricData,
             url, // Override url with apiPaths or metricData.url
-            statisticsUrl: apiPaths.metrics || DashboardPaths.METRICS,
         };
         return (_jsx(Grid.Col, { span: matchesSmall ? 12 : span, offset: offset, children: _jsx(VisualComponent, { ...props }) }, `visual-${sectionTitle}-${visual.id}`));
     }, [config.themeColor, isXs, isSm, apiPaths]);

package/lib/dashboard-visuals/utils/chartOptions.js

@@ -286,6 +286,7 @@ export const getDonutChartOptions = ({ data }) => {
     return chartOptions;
 };
 export const formatChartLabel = (params) => {
+    console.log('formatChartLabel params', params);
     const formattedValue = params.value.toLocaleString();
     const percentage = params.treeMapPercent ? ` (${params.treeMapPercent.toFixed(1)}%)` : '';
     return `${params.name}\n${params.valueLabel}: ${formattedValue}\n${percentage}`;

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

@@ -4,9 +4,8 @@ import Card from '../components/CardWrapper';
 import ChartWrapper from '../components/ChartWrapper';
 import { useChartData } from '../hooks/useChartData';
 import { DashboardPaths, formatValue } from '../utils';
-const Tile = ({ query, title, format, url, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
-    const effectiveUrl = url || DashboardPaths.METRICS;
-    const { data, error, loading, isEmpty, refresh } = useChartData(effectiveUrl, query);
+const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
+    const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
     // Safe default values - handle both flat and nested data structures
     let value = 0;
     if (data) {

package/lib/index.d.ts

@@ -20,7 +20,3 @@ export * from './rbac';
 export { useImageUpload } from './shared/hooks/useImageUpload';
 export type { UseImageUploadProps, UploadResponse } from './shared/hooks/useImageUpload';
 export * from './feedback';
-export { BaseChart, BarChart, LineChart, AreaChart, DonutChart, PieChart, HeatmapChart, RadialChart, MixedChart, StatCard, MetricCard, InfoCard, CardGrid, StatCardGrid, MetricCardGrid, TransactionListCard, TopItemsCard, visualRegistryV2, VisualType, getVisualComponent, isRegisteredVisual, getRegisteredVisualTypes, registerVisual, DashboardWrapperV2, useChartData, useChartQueryData, } from './dashboard-visuals-v2';
-export type { BaseChartProps, BarChartProps, LineChartProps, AreaChartProps, DonutChartProps, PieChartProps, HeatmapChartProps, RadialChartProps, MixedChartProps, ChartQueryProps, ChartDataPoint, ChartSeries, StatCardProps, MetricCardProps, InfoCardProps, CardGridProps, TransactionListCardProps, TopItemsCardProps, DashboardWrapperV2Props, } from './dashboard-visuals-v2';
-export { DataTable, DataTableHeader, DataTableBody, DataTablePagination, DataTableSearch, DataTableToolbar, DataTableEmpty, DataTableLoading, DataTableError, DataTableRowActions, useTableData, usePaginatedTableData, exportToCSV, exportToJSON, downloadFile, createExportHandler, } from './data-table-v2';
-export type { DataTableProps, DataTableColumn, DataTableClassNames, RowSelectionOptions, PaginationOptions, SortingOptions, FilteringOptions, ColumnVisibilityOptions, ExportOptions, RowAction, BulkAction, DataTableServerResponse, DataTableServerRequest, UseTableDataOptions, UsePaginatedTableDataOptions, UseTableDataResult, UsePaginatedTableDataResult, } from './data-table-v2';

package/lib/index.js

@@ -30,26 +30,3 @@ export * from './rbac';
 export { useImageUpload } from './shared/hooks/useImageUpload';
 // Feedback System
 export * from './feedback';
-// ============================================
-// V2 Components (ApexCharts + TanStack Table)
-// ============================================
-// Dashboard Visuals V2 - ApexCharts based
-export { 
-// Charts
-BaseChart, BarChart, LineChart, AreaChart, DonutChart, PieChart, HeatmapChart, RadialChart, MixedChart, 
-// Cards
-StatCard, MetricCard, InfoCard, CardGrid, StatCardGrid, MetricCardGrid, TransactionListCard, TopItemsCard, 
-// Registry
-visualRegistryV2, VisualType, getVisualComponent, isRegisteredVisual, getRegisteredVisualTypes, registerVisual, 
-// Wrapper
-DashboardWrapperV2, 
-// Hooks
-useChartData, useChartQueryData, } from './dashboard-visuals-v2';
-// DataTable V2 - TanStack Table based
-export { DataTable, 
-// Sub-components
-DataTableHeader, DataTableBody, DataTablePagination, DataTableSearch, DataTableToolbar, DataTableEmpty, DataTableLoading, DataTableError, DataTableRowActions, 
-// Hooks (TanStack Query)
-useTableData, usePaginatedTableData, 
-// Utils
-exportToCSV, exportToJSON, downloadFile, createExportHandler, } from './data-table-v2';