@pagamio/frontend-commons-lib 0.8.217 → 0.8.219

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/lib/api/index.d.ts +0 -2
  2. package/lib/api/index.js +0 -2
  3. package/lib/components/layout/Sidebar.js +53 -50
  4. package/lib/components/ui/Sheet.d.ts +1 -1
  5. package/lib/context/SidebarContext.d.ts +7 -7
  6. package/lib/dashboard-visuals/index.js +3 -10
  7. package/lib/dashboard-visuals/utils/chartOptions.js +1 -0
  8. package/lib/dashboard-visuals/visuals/Tile.js +2 -3
  9. package/lib/index.d.ts +0 -4
  10. package/lib/index.js +0 -23
  11. package/lib/styles.css +0 -209
  12. package/package.json +1 -7
  13. package/lib/api/TanstackQueryProvider.d.ts +0 -146
  14. package/lib/api/TanstackQueryProvider.js +0 -140
  15. package/lib/api/tanstackQuery.d.ts +0 -249
  16. package/lib/api/tanstackQuery.js +0 -299
  17. package/lib/dashboard-visuals-v2/DashboardWrapperV2.d.ts +0 -81
  18. package/lib/dashboard-visuals-v2/DashboardWrapperV2.js +0 -223
  19. package/lib/dashboard-visuals-v2/cards/CardGrid.d.ts +0 -22
  20. package/lib/dashboard-visuals-v2/cards/CardGrid.js +0 -27
  21. package/lib/dashboard-visuals-v2/cards/InfoCard.d.ts +0 -7
  22. package/lib/dashboard-visuals-v2/cards/InfoCard.js +0 -26
  23. package/lib/dashboard-visuals-v2/cards/MetricCard.d.ts +0 -7
  24. package/lib/dashboard-visuals-v2/cards/MetricCard.js +0 -37
  25. package/lib/dashboard-visuals-v2/cards/StatCard.d.ts +0 -7
  26. package/lib/dashboard-visuals-v2/cards/StatCard.js +0 -92
  27. package/lib/dashboard-visuals-v2/cards/TopItemsCard.d.ts +0 -7
  28. package/lib/dashboard-visuals-v2/cards/TopItemsCard.js +0 -34
  29. package/lib/dashboard-visuals-v2/cards/TransactionListCard.d.ts +0 -7
  30. package/lib/dashboard-visuals-v2/cards/TransactionListCard.js +0 -24
  31. package/lib/dashboard-visuals-v2/cards/index.d.ts +0 -9
  32. package/lib/dashboard-visuals-v2/cards/index.js +0 -9
  33. package/lib/dashboard-visuals-v2/charts/AreaChart.d.ts +0 -7
  34. package/lib/dashboard-visuals-v2/charts/AreaChart.js +0 -124
  35. package/lib/dashboard-visuals-v2/charts/BarChart.d.ts +0 -7
  36. package/lib/dashboard-visuals-v2/charts/BarChart.js +0 -106
  37. package/lib/dashboard-visuals-v2/charts/BaseChart.d.ts +0 -61
  38. package/lib/dashboard-visuals-v2/charts/BaseChart.js +0 -173
  39. package/lib/dashboard-visuals-v2/charts/DonutChart.d.ts +0 -7
  40. package/lib/dashboard-visuals-v2/charts/DonutChart.js +0 -108
  41. package/lib/dashboard-visuals-v2/charts/HeatmapChart.d.ts +0 -7
  42. package/lib/dashboard-visuals-v2/charts/HeatmapChart.js +0 -101
  43. package/lib/dashboard-visuals-v2/charts/LineChart.d.ts +0 -7
  44. package/lib/dashboard-visuals-v2/charts/LineChart.js +0 -109
  45. package/lib/dashboard-visuals-v2/charts/MixedChart.d.ts +0 -7
  46. package/lib/dashboard-visuals-v2/charts/MixedChart.js +0 -106
  47. package/lib/dashboard-visuals-v2/charts/PieChart.d.ts +0 -7
  48. package/lib/dashboard-visuals-v2/charts/PieChart.js +0 -10
  49. package/lib/dashboard-visuals-v2/charts/RadialChart.d.ts +0 -7
  50. package/lib/dashboard-visuals-v2/charts/RadialChart.js +0 -72
  51. package/lib/dashboard-visuals-v2/charts/index.d.ts +0 -12
  52. package/lib/dashboard-visuals-v2/charts/index.js +0 -12
  53. package/lib/dashboard-visuals-v2/components/DataFetchingVisual.d.ts +0 -0
  54. package/lib/dashboard-visuals-v2/components/DataFetchingVisual.js +0 -1
  55. package/lib/dashboard-visuals-v2/components/index.d.ts +0 -0
  56. package/lib/dashboard-visuals-v2/components/index.js +0 -1
  57. package/lib/dashboard-visuals-v2/hooks/index.d.ts +0 -4
  58. package/lib/dashboard-visuals-v2/hooks/index.js +0 -4
  59. package/lib/dashboard-visuals-v2/hooks/useChartData.d.ts +0 -72
  60. package/lib/dashboard-visuals-v2/hooks/useChartData.js +0 -122
  61. package/lib/dashboard-visuals-v2/index.d.ts +0 -10
  62. package/lib/dashboard-visuals-v2/index.js +0 -16
  63. package/lib/dashboard-visuals-v2/types/card.types.d.ts +0 -237
  64. package/lib/dashboard-visuals-v2/types/card.types.js +0 -30
  65. package/lib/dashboard-visuals-v2/types/chart.types.d.ts +0 -308
  66. package/lib/dashboard-visuals-v2/types/chart.types.js +0 -25
  67. package/lib/dashboard-visuals-v2/types/index.d.ts +0 -6
  68. package/lib/dashboard-visuals-v2/types/index.js +0 -6
  69. package/lib/dashboard-visuals-v2/utils/index.d.ts +0 -0
  70. package/lib/dashboard-visuals-v2/utils/index.js +0 -1
  71. package/lib/dashboard-visuals-v2/utils/propsTransformer.d.ts +0 -0
  72. package/lib/dashboard-visuals-v2/utils/propsTransformer.js +0 -1
  73. package/lib/dashboard-visuals-v2/visualRegistry.d.ts +0 -59
  74. package/lib/dashboard-visuals-v2/visualRegistry.js +0 -110
  75. package/lib/data-table-v2/DataTable.d.ts +0 -7
  76. package/lib/data-table-v2/DataTable.js +0 -206
  77. package/lib/data-table-v2/components/DataTableBody.d.ts +0 -19
  78. package/lib/data-table-v2/components/DataTableBody.js +0 -20
  79. package/lib/data-table-v2/components/DataTableEmpty.d.ts +0 -17
  80. package/lib/data-table-v2/components/DataTableEmpty.js +0 -13
  81. package/lib/data-table-v2/components/DataTableError.d.ts +0 -16
  82. package/lib/data-table-v2/components/DataTableError.js +0 -14
  83. package/lib/data-table-v2/components/DataTableHeader.d.ts +0 -15
  84. package/lib/data-table-v2/components/DataTableHeader.js +0 -31
  85. package/lib/data-table-v2/components/DataTableLoading.d.ts +0 -14
  86. package/lib/data-table-v2/components/DataTableLoading.js +0 -19
  87. package/lib/data-table-v2/components/DataTablePagination.d.ts +0 -36
  88. package/lib/data-table-v2/components/DataTablePagination.js +0 -20
  89. package/lib/data-table-v2/components/DataTableRowActions.d.ts +0 -13
  90. package/lib/data-table-v2/components/DataTableRowActions.js +0 -57
  91. package/lib/data-table-v2/components/DataTableSearch.d.ts +0 -19
  92. package/lib/data-table-v2/components/DataTableSearch.js +0 -33
  93. package/lib/data-table-v2/components/DataTableToolbar.d.ts +0 -54
  94. package/lib/data-table-v2/components/DataTableToolbar.js +0 -28
  95. package/lib/data-table-v2/components/index.d.ts +0 -12
  96. package/lib/data-table-v2/components/index.js +0 -12
  97. package/lib/data-table-v2/hooks/index.d.ts +0 -4
  98. package/lib/data-table-v2/hooks/index.js +0 -4
  99. package/lib/data-table-v2/hooks/useTableData.d.ts +0 -118
  100. package/lib/data-table-v2/hooks/useTableData.js +0 -210
  101. package/lib/data-table-v2/index.d.ts +0 -9
  102. package/lib/data-table-v2/index.js +0 -12
  103. package/lib/data-table-v2/types/index.d.ts +0 -296
  104. package/lib/data-table-v2/types/index.js +0 -1
  105. package/lib/data-table-v2/utils/export.d.ts +0 -26
  106. package/lib/data-table-v2/utils/export.js +0 -92
  107. package/lib/data-table-v2/utils/index.d.ts +0 -4
  108. package/lib/data-table-v2/utils/index.js +0 -4
@@ -1,6 +1,4 @@
1
1
  export * from './client';
2
2
  export * from './swr';
3
- export * from './tanstackQuery';
4
- export * from './TanstackQueryProvider';
5
3
  export * from './context';
6
4
  export * from './types';
package/lib/api/index.js CHANGED
@@ -1,6 +1,4 @@
1
1
  export * from './client';
2
2
  export * from './swr';
3
- export * from './tanstackQuery';
4
- export * from './TanstackQueryProvider';
5
3
  export * from './context';
6
4
  export * from './types';
@@ -6,21 +6,34 @@ import { useAppSidebarContext } from '../../context';
6
6
  import { useLibTranslations, useTranslation } from '../../translations';
7
7
  const AppSidebarMenu = () => {
8
8
  const { pages, groupByItem } = useAppSidebarContext();
9
+ // Helper to generate unique key for sidebar items
10
+ const getItemKey = (item, index) => item.key || item.href || `${item.label}-${index}`;
9
11
  // If groupByItem is true each item gets its own ItemGroup
10
12
  if (groupByItem) {
11
- return (_jsx(Sidebar.Items, { children: pages.map((item) => (_jsx(Sidebar.ItemGroup, { children: _jsx(AppSidebarItem, { ...item }) }, item.label))) }));
13
+ return (_jsx(Sidebar.Items, { children: pages.map((item, index) => {
14
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
15
+ const { key, ...itemProps } = item;
16
+ return (_jsx(Sidebar.ItemGroup, { children: _jsx(AppSidebarItem, { ...itemProps }) }, getItemKey(item, index)));
17
+ }) }));
12
18
  }
13
19
  // Default behavior all items in one ItemGroup
14
- return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
20
+ return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item, index) => {
21
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
22
+ const { key, ...itemProps } = item;
23
+ return _jsx(AppSidebarItem, { ...itemProps }, getItemKey(item, index));
24
+ }) }) }));
15
25
  };
16
- const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = false, comingSoon = false, isSectionHeader = false, }) => {
17
- const { pathname, linkComponent: Link } = useAppSidebarContext();
26
+ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = false, isSectionHeader = false, }) => {
27
+ const { pathname, linkComponent: Link, desktop } = useAppSidebarContext();
18
28
  const { t } = useTranslation();
19
- const { tLib } = useLibTranslations();
20
- // Ensure label is always a string to prevent .charAt() errors in flowbite-react
21
- const safeLabel = String(label || '');
22
- const translatedLabel = String(t(safeLabel) || safeLabel || '');
23
- const translatedBadge = badge ? String(t(badge) || badge || '') : undefined;
29
+ // Handle section headers - render as a non-interactive label (hide when collapsed)
30
+ if (isSectionHeader) {
31
+ // Don't render section headers when sidebar is collapsed
32
+ if (desktop.isCollapsed) {
33
+ return null;
34
+ }
35
+ return (_jsxs("div", { className: "pt-4 pb-1 px-3 first:pt-0", children: [showSeparator && _jsx("hr", { className: "mb-3 border-t border-gray-200 dark:border-gray-700" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t(label) })] }));
36
+ }
24
37
  // Check if current path matches this item or any of its descendants
25
38
  const isParentActive = href ? pathname === href || pathname.startsWith(`${href}/`) : false;
26
39
  // Recursive function to check if any nested child is active
@@ -33,69 +46,59 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
33
46
  return false;
34
47
  });
35
48
  };
36
- // Helper to render a single child item (used in multiple places)
37
- const renderChildItem = (child) => {
38
- const childSafeLabel = String(child.label || '');
39
- const childTranslatedLabel = String(t(childSafeLabel) || childSafeLabel || '');
40
- // Inline section header - renders as a small label separator (flat, no nesting)
41
- if (child.isSectionHeader) {
42
- 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));
43
- }
44
- // Nested items with children - recurse
45
- if (child.items?.length) {
46
- return (_jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) }, child.label));
47
- }
48
- // Coming soon item - disabled, no navigation
49
- if (child.comingSoon) {
50
- 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));
51
- }
52
- // Regular item with link
53
- if (child.href) {
54
- 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 &&
55
- '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));
56
- }
57
- // Item without link (static text)
58
- 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));
59
- };
60
- // Inline section header at top level - renders as a small label separator
61
- if (isSectionHeader) {
62
- 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 })] }));
63
- }
64
49
  // If there's exactly one item, render it as a direct link instead of a dropdown
65
50
  if (items?.length === 1 && !forceDropdown) {
66
51
  const singleItem = items[0];
67
52
  if (!singleItem.href) {
68
53
  // If single item has no href, render without link
69
- 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 })] }));
54
+ return (_jsx(Sidebar.Item, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(label) }));
70
55
  }
71
- 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 &&
72
- '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 })] }));
56
+ 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 &&
57
+ '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) }));
73
58
  }
74
59
  // Handle non-collapsible sections - render as section header with always-visible links
75
60
  if (items?.length && collapsible === false) {
76
- 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)) })] }));
61
+ 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, childIndex) => {
62
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
63
+ const { key, ...childProps } = child;
64
+ return (_jsx(React.Fragment, { children: child.items?.length ? (
65
+ // Recursively render nested items
66
+ _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...childProps }) })) : child.href ? (
67
+ // Render leaf item with link
68
+ _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 &&
69
+ '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) })) : (
70
+ // Render leaf item without link
71
+ _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.key || child.href || `${child.label}-${childIndex}`));
72
+ }) })] }));
77
73
  }
78
74
  if (items?.length) {
79
75
  const isOpen = isParentActive || hasActiveChild(items);
80
- 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',
76
+ 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',
81
77
  // Parent styling when its child is active
82
78
  hasActiveChild(items) && 'text-primary-700 dark:text-primary-300',
83
79
  // Parent styling when it's directly active
84
80
  isParentActive &&
85
81
  !hasActiveChild(items) &&
86
- '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))) }));
82
+ '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, childIndex) => {
83
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
84
+ const { key, ...childProps } = child;
85
+ return (_jsx(React.Fragment, { children: child.items?.length ? (
86
+ // Recursively render nested items
87
+ _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...childProps }) })) : child.href ? (
88
+ // Render leaf item with link
89
+ _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 &&
90
+ '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) })) : (
91
+ // Render leaf item without link
92
+ _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.key || child.href || `${child.label}-${childIndex}`));
93
+ }) }));
87
94
  }
88
95
  // Render leaf item
89
- // Handle comingSoon leaf item
90
- if (comingSoon) {
91
- 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') })] }) }));
92
- }
93
96
  // If no href, render as a non-link item
94
97
  if (!href) {
95
- 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 })] }));
98
+ 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) }));
96
99
  }
97
- 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 &&
98
- '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 })] }));
100
+ 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 &&
101
+ '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) }));
99
102
  };
100
103
  const AppMobileSidebar = () => {
101
104
  const { mobile: { isOpen, close }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();
@@ -8,7 +8,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogC
8
8
  declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
9
9
  declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
10
10
  declare const sheetVariants: (props?: ({
11
- side?: "left" | "right" | "top" | "bottom" | null | undefined;
11
+ side?: "bottom" | "left" | "right" | "top" | null | undefined;
12
12
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
13
13
  interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
14
14
  }
@@ -1,6 +1,11 @@
1
1
  import type { FC, HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
2
2
  import React from 'react';
3
3
  interface AppSidebarPageItem {
4
+ /**
5
+ * Unique key for React rendering. If not provided, href or label will be used.
6
+ * Use this to avoid duplicate key warnings when multiple items have the same label.
7
+ */
8
+ key?: string;
4
9
  href?: string;
5
10
  target?: HTMLAttributeAnchorTarget;
6
11
  icon?: FC;
@@ -20,13 +25,8 @@ interface AppSidebarPageItem {
20
25
  */
21
26
  showSeparator?: boolean;
22
27
  /**
23
- * When true, the item is shown but disabled with a "Coming Soon" badge.
24
- * The link will not be navigable. Defaults to false.
25
- */
26
- comingSoon?: boolean;
27
- /**
28
- * When true, renders as an inline section header (small label with separator).
29
- * Used for flat organization without nesting. Defaults to false.
28
+ * When true, renders as a flat inline section header (non-interactive label).
29
+ * Used for visual grouping in flat sidebar structures.
30
30
  */
31
31
  isSectionHeader?: boolean;
32
32
  }
@@ -7,7 +7,7 @@ import { FilterComponent, Tab } from '../components';
7
7
  import { useMediaQueries } from '../shared';
8
8
  import ErrorState from './components/ErrorState';
9
9
  import FilterComponentSkeleton from './components/FilterComponentSkeleton';
10
- import { DashboardPaths, defaultDashboardApiPaths, getFilterOptionsData, getGridColProps, } from './utils';
10
+ import { defaultDashboardApiPaths, getFilterOptionsData, getGridColProps } from './utils';
11
11
  import componentRegistry from './visualRegistry';
12
12
  const OverviewContent = ({ visualData, renderContent, renderVisual }) => {
13
13
  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
170
170
  return null;
171
171
  }
172
172
  // Determine URL based on component type and custom apiPaths
173
- // Priority:
174
- // 1. metricData.url (Specific override)
175
- // 2. apiPaths.metrics/query (Configured path)
176
- // 3. DashboardPaths.METRICS/QUERY (Library default)
173
+ // If metricData already has a custom url, use it; otherwise use apiPaths
177
174
  const isTileType = metricData.type === 'Tile' || metricData.type === 'MetricSummaryCard';
178
- // Determine the API path or fallback default
179
- const defaultPath = isTileType ? DashboardPaths.METRICS : DashboardPaths.QUERY;
180
- const apiPath = isTileType ? apiPaths.metrics : apiPaths.query;
181
- const defaultUrl = apiPath || defaultPath;
175
+ const defaultUrl = isTileType ? apiPaths.metrics : apiPaths.query;
182
176
  const url = metricData.url || defaultUrl;
183
177
  const props = {
184
178
  data: metricData.data,
@@ -193,7 +187,6 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
193
187
  currencyDisplaySymbol: metricData.currencyDisplaySymbol,
194
188
  ...metricData,
195
189
  url, // Override url with apiPaths or metricData.url
196
- statisticsUrl: apiPaths.metrics || DashboardPaths.METRICS,
197
190
  };
198
191
  return (_jsx(Grid.Col, { span: matchesSmall ? 12 : span, offset: offset, children: _jsx(VisualComponent, { ...props }) }, `visual-${sectionTitle}-${visual.id}`));
199
192
  }, [config.themeColor, isXs, isSm, apiPaths]);
@@ -286,6 +286,7 @@ export const getDonutChartOptions = ({ data }) => {
286
286
  return chartOptions;
287
287
  };
288
288
  export const formatChartLabel = (params) => {
289
+ console.log('formatChartLabel params', params);
289
290
  const formattedValue = params.value.toLocaleString();
290
291
  const percentage = params.treeMapPercent ? ` (${params.treeMapPercent.toFixed(1)}%)` : '';
291
292
  return `${params.name}\n${params.valueLabel}: ${formattedValue}\n${percentage}`;
@@ -4,9 +4,8 @@ import Card from '../components/CardWrapper';
4
4
  import ChartWrapper from '../components/ChartWrapper';
5
5
  import { useChartData } from '../hooks/useChartData';
6
6
  import { DashboardPaths, formatValue } from '../utils';
7
- const Tile = ({ query, title, format, url, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
8
- const effectiveUrl = url || DashboardPaths.METRICS;
9
- const { data, error, loading, isEmpty, refresh } = useChartData(effectiveUrl, query);
7
+ const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
8
+ const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
10
9
  // Safe default values - handle both flat and nested data structures
11
10
  let value = 0;
12
11
  if (data) {
package/lib/index.d.ts CHANGED
@@ -20,7 +20,3 @@ export * from './rbac';
20
20
  export { useImageUpload } from './shared/hooks/useImageUpload';
21
21
  export type { UseImageUploadProps, UploadResponse } from './shared/hooks/useImageUpload';
22
22
  export * from './feedback';
23
- 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';
24
- 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';
25
- export { DataTable, DataTableHeader, DataTableBody, DataTablePagination, DataTableSearch, DataTableToolbar, DataTableEmpty, DataTableLoading, DataTableError, DataTableRowActions, useTableData, usePaginatedTableData, exportToCSV, exportToJSON, downloadFile, createExportHandler, } from './data-table-v2';
26
- 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 CHANGED
@@ -30,26 +30,3 @@ export * from './rbac';
30
30
  export { useImageUpload } from './shared/hooks/useImageUpload';
31
31
  // Feedback System
32
32
  export * from './feedback';
33
- // ============================================
34
- // V2 Components (ApexCharts + TanStack Table)
35
- // ============================================
36
- // Dashboard Visuals V2 - ApexCharts based
37
- export {
38
- // Charts
39
- BaseChart, BarChart, LineChart, AreaChart, DonutChart, PieChart, HeatmapChart, RadialChart, MixedChart,
40
- // Cards
41
- StatCard, MetricCard, InfoCard, CardGrid, StatCardGrid, MetricCardGrid, TransactionListCard, TopItemsCard,
42
- // Registry
43
- visualRegistryV2, VisualType, getVisualComponent, isRegisteredVisual, getRegisteredVisualTypes, registerVisual,
44
- // Wrapper
45
- DashboardWrapperV2,
46
- // Hooks
47
- useChartData, useChartQueryData, } from './dashboard-visuals-v2';
48
- // DataTable V2 - TanStack Table based
49
- export { DataTable,
50
- // Sub-components
51
- DataTableHeader, DataTableBody, DataTablePagination, DataTableSearch, DataTableToolbar, DataTableEmpty, DataTableLoading, DataTableError, DataTableRowActions,
52
- // Hooks (TanStack Query)
53
- useTableData, usePaginatedTableData,
54
- // Utils
55
- exportToCSV, exportToJSON, downloadFile, createExportHandler, } from './data-table-v2';