@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.
- package/lib/api/index.d.ts +0 -2
- package/lib/api/index.js +0 -2
- package/lib/components/layout/Sidebar.js +53 -50
- package/lib/components/ui/Sheet.d.ts +1 -1
- package/lib/context/SidebarContext.d.ts +7 -7
- package/lib/dashboard-visuals/index.js +3 -10
- package/lib/dashboard-visuals/utils/chartOptions.js +1 -0
- package/lib/dashboard-visuals/visuals/Tile.js +2 -3
- package/lib/index.d.ts +0 -4
- package/lib/index.js +0 -23
- package/lib/styles.css +0 -209
- package/package.json +1 -7
- package/lib/api/TanstackQueryProvider.d.ts +0 -146
- package/lib/api/TanstackQueryProvider.js +0 -140
- package/lib/api/tanstackQuery.d.ts +0 -249
- package/lib/api/tanstackQuery.js +0 -299
- package/lib/dashboard-visuals-v2/DashboardWrapperV2.d.ts +0 -81
- package/lib/dashboard-visuals-v2/DashboardWrapperV2.js +0 -223
- package/lib/dashboard-visuals-v2/cards/CardGrid.d.ts +0 -22
- package/lib/dashboard-visuals-v2/cards/CardGrid.js +0 -27
- package/lib/dashboard-visuals-v2/cards/InfoCard.d.ts +0 -7
- package/lib/dashboard-visuals-v2/cards/InfoCard.js +0 -26
- package/lib/dashboard-visuals-v2/cards/MetricCard.d.ts +0 -7
- package/lib/dashboard-visuals-v2/cards/MetricCard.js +0 -37
- package/lib/dashboard-visuals-v2/cards/StatCard.d.ts +0 -7
- package/lib/dashboard-visuals-v2/cards/StatCard.js +0 -92
- package/lib/dashboard-visuals-v2/cards/TopItemsCard.d.ts +0 -7
- package/lib/dashboard-visuals-v2/cards/TopItemsCard.js +0 -34
- package/lib/dashboard-visuals-v2/cards/TransactionListCard.d.ts +0 -7
- package/lib/dashboard-visuals-v2/cards/TransactionListCard.js +0 -24
- package/lib/dashboard-visuals-v2/cards/index.d.ts +0 -9
- package/lib/dashboard-visuals-v2/cards/index.js +0 -9
- package/lib/dashboard-visuals-v2/charts/AreaChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/AreaChart.js +0 -124
- package/lib/dashboard-visuals-v2/charts/BarChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/BarChart.js +0 -106
- package/lib/dashboard-visuals-v2/charts/BaseChart.d.ts +0 -61
- package/lib/dashboard-visuals-v2/charts/BaseChart.js +0 -173
- package/lib/dashboard-visuals-v2/charts/DonutChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/DonutChart.js +0 -108
- package/lib/dashboard-visuals-v2/charts/HeatmapChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/HeatmapChart.js +0 -101
- package/lib/dashboard-visuals-v2/charts/LineChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/LineChart.js +0 -109
- package/lib/dashboard-visuals-v2/charts/MixedChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/MixedChart.js +0 -106
- package/lib/dashboard-visuals-v2/charts/PieChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/PieChart.js +0 -10
- package/lib/dashboard-visuals-v2/charts/RadialChart.d.ts +0 -7
- package/lib/dashboard-visuals-v2/charts/RadialChart.js +0 -72
- package/lib/dashboard-visuals-v2/charts/index.d.ts +0 -12
- package/lib/dashboard-visuals-v2/charts/index.js +0 -12
- package/lib/dashboard-visuals-v2/components/DataFetchingVisual.d.ts +0 -0
- package/lib/dashboard-visuals-v2/components/DataFetchingVisual.js +0 -1
- package/lib/dashboard-visuals-v2/components/index.d.ts +0 -0
- package/lib/dashboard-visuals-v2/components/index.js +0 -1
- package/lib/dashboard-visuals-v2/hooks/index.d.ts +0 -4
- package/lib/dashboard-visuals-v2/hooks/index.js +0 -4
- package/lib/dashboard-visuals-v2/hooks/useChartData.d.ts +0 -72
- package/lib/dashboard-visuals-v2/hooks/useChartData.js +0 -122
- package/lib/dashboard-visuals-v2/index.d.ts +0 -10
- package/lib/dashboard-visuals-v2/index.js +0 -16
- package/lib/dashboard-visuals-v2/types/card.types.d.ts +0 -237
- package/lib/dashboard-visuals-v2/types/card.types.js +0 -30
- package/lib/dashboard-visuals-v2/types/chart.types.d.ts +0 -308
- package/lib/dashboard-visuals-v2/types/chart.types.js +0 -25
- package/lib/dashboard-visuals-v2/types/index.d.ts +0 -6
- package/lib/dashboard-visuals-v2/types/index.js +0 -6
- package/lib/dashboard-visuals-v2/utils/index.d.ts +0 -0
- package/lib/dashboard-visuals-v2/utils/index.js +0 -1
- package/lib/dashboard-visuals-v2/utils/propsTransformer.d.ts +0 -0
- package/lib/dashboard-visuals-v2/utils/propsTransformer.js +0 -1
- package/lib/dashboard-visuals-v2/visualRegistry.d.ts +0 -59
- package/lib/dashboard-visuals-v2/visualRegistry.js +0 -110
- package/lib/data-table-v2/DataTable.d.ts +0 -7
- package/lib/data-table-v2/DataTable.js +0 -206
- package/lib/data-table-v2/components/DataTableBody.d.ts +0 -19
- package/lib/data-table-v2/components/DataTableBody.js +0 -20
- package/lib/data-table-v2/components/DataTableEmpty.d.ts +0 -17
- package/lib/data-table-v2/components/DataTableEmpty.js +0 -13
- package/lib/data-table-v2/components/DataTableError.d.ts +0 -16
- package/lib/data-table-v2/components/DataTableError.js +0 -14
- package/lib/data-table-v2/components/DataTableHeader.d.ts +0 -15
- package/lib/data-table-v2/components/DataTableHeader.js +0 -31
- package/lib/data-table-v2/components/DataTableLoading.d.ts +0 -14
- package/lib/data-table-v2/components/DataTableLoading.js +0 -19
- package/lib/data-table-v2/components/DataTablePagination.d.ts +0 -36
- package/lib/data-table-v2/components/DataTablePagination.js +0 -20
- package/lib/data-table-v2/components/DataTableRowActions.d.ts +0 -13
- package/lib/data-table-v2/components/DataTableRowActions.js +0 -57
- package/lib/data-table-v2/components/DataTableSearch.d.ts +0 -19
- package/lib/data-table-v2/components/DataTableSearch.js +0 -33
- package/lib/data-table-v2/components/DataTableToolbar.d.ts +0 -54
- package/lib/data-table-v2/components/DataTableToolbar.js +0 -28
- package/lib/data-table-v2/components/index.d.ts +0 -12
- package/lib/data-table-v2/components/index.js +0 -12
- package/lib/data-table-v2/hooks/index.d.ts +0 -4
- package/lib/data-table-v2/hooks/index.js +0 -4
- package/lib/data-table-v2/hooks/useTableData.d.ts +0 -118
- package/lib/data-table-v2/hooks/useTableData.js +0 -210
- package/lib/data-table-v2/index.d.ts +0 -9
- package/lib/data-table-v2/index.js +0 -12
- package/lib/data-table-v2/types/index.d.ts +0 -296
- package/lib/data-table-v2/types/index.js +0 -1
- package/lib/data-table-v2/utils/export.d.ts +0 -26
- package/lib/data-table-v2/utils/export.js +0 -92
- package/lib/data-table-v2/utils/index.d.ts +0 -4
- package/lib/data-table-v2/utils/index.js +0 -4
package/lib/api/index.d.ts
CHANGED
package/lib/api/index.js
CHANGED
|
@@ -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) =>
|
|
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) =>
|
|
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,
|
|
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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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 (
|
|
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 (
|
|
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:
|
|
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:
|
|
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:
|
|
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) =>
|
|
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 (
|
|
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 (
|
|
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:
|
|
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?: "
|
|
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,
|
|
24
|
-
*
|
|
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 {
|
|
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
|
-
//
|
|
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
|
-
|
|
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
|
|
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';
|