@nubitio/dashboard 0.5.19

package/dist/index.mjs

@@ -0,0 +1,527 @@
+import { AppToolbar, Badge, EmptyState, StatCard } from "@nubitio/ui";
+import { useCallback, useEffect, useState } from "react";
+import { getCoreApiBaseUrl, getCoreCurrency, getCoreLocale } from "@nubitio/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+//#region packages/dashboard/dashboard/defineDashboard.ts
+const dashboardCache = /* @__PURE__ */ new Map();
+function cacheKey(config) {
+	try {
+		return JSON.stringify({
+			id: config.id,
+			title: config.title,
+			dataUrl: config.dataUrl,
+			sections: config.sections
+		});
+	} catch {
+		return null;
+	}
+}
+/**
+* Declarative dashboard definition — mirrors `defineResource` ergonomics.
+*
+* ```ts
+* const overview = defineDashboard({
+*   title: 'Dashboard',
+*   dataUrl: '/api/dashboard/overview',
+*   sections: [
+*     { layout: 'stats', widgets: [statWidget({ id: 'revenue', title: 'Revenue', valuePath: 'stats.revenue', format: 'currency' })] },
+*   ],
+* });
+*
+* export const DashboardRoute = () => <DashboardPage config={overview} />;
+* ```
+*/
+function defineDashboard(config) {
+	const key = cacheKey(config);
+	if (key !== null && dashboardCache.has(key)) return dashboardCache.get(key);
+	const dashboard = {
+		id: "dashboard",
+		...config
+	};
+	if (key !== null) dashboardCache.set(key, dashboard);
+	return dashboard;
+}
+//#endregion
+//#region packages/dashboard/dashboard/useDashboardData.ts
+function resolveDataUrl(dataUrl) {
+	if (/^https?:\/\//i.test(dataUrl)) return dataUrl;
+	return `${getCoreApiBaseUrl().replace(/\/+$/, "")}${dataUrl.startsWith("/") ? dataUrl : `/${dataUrl}`}`;
+}
+const EMPTY = {
+	data: {},
+	loading: false,
+	error: null
+};
+function useDashboardData(dataUrl, refreshInterval) {
+	const [state, setState] = useState({
+		...EMPTY,
+		loading: !!dataUrl
+	});
+	const refetch = useCallback(async () => {
+		if (!dataUrl) {
+			setState(EMPTY);
+			return;
+		}
+		setState((prev) => ({
+			...prev,
+			loading: true,
+			error: null
+		}));
+		try {
+			const response = await fetch(resolveDataUrl(dataUrl), { credentials: "include" });
+			if (!response.ok) throw new Error(`Dashboard request failed (${response.status})`);
+			setState({
+				data: await response.json(),
+				loading: false,
+				error: null
+			});
+		} catch (error) {
+			setState({
+				data: {},
+				loading: false,
+				error: error instanceof Error ? error.message : "Failed to load dashboard"
+			});
+		}
+	}, [dataUrl]);
+	useEffect(() => {
+		refetch();
+	}, [refetch]);
+	useEffect(() => {
+		if (!refreshInterval || !dataUrl) return void 0;
+		const timer = window.setInterval(() => {
+			refetch();
+		}, refreshInterval);
+		return () => window.clearInterval(timer);
+	}, [
+		dataUrl,
+		refreshInterval,
+		refetch
+	]);
+	return {
+		...state,
+		refetch
+	};
+}
+//#endregion
+//#region packages/dashboard/dashboard/formatValue.ts
+function formatDashboardValue(value, format = "text") {
+	if (value === null || value === void 0) return "—";
+	if (format === "text") return String(value);
+	if (format === "date" || format === "datetime") {
+		const date = value instanceof Date ? value : new Date(String(value));
+		if (Number.isNaN(date.getTime())) return String(value);
+		return new Intl.DateTimeFormat(getCoreLocale(), {
+			dateStyle: format === "date" ? "medium" : void 0,
+			timeStyle: format === "datetime" ? "short" : void 0
+		}).format(date);
+	}
+	const numeric = typeof value === "number" ? value : Number(value);
+	if (!Number.isFinite(numeric)) return String(value);
+	const baseOptions = {
+		minimumFractionDigits: format === "currency" ? 2 : void 0,
+		maximumFractionDigits: format === "currency" ? 2 : void 0
+	};
+	if (format === "currency") {
+		const currency = getCoreCurrency();
+		if (!currency) return new Intl.NumberFormat(getCoreLocale(), baseOptions).format(numeric);
+		return new Intl.NumberFormat(getCoreLocale(), {
+			...baseOptions,
+			style: "currency",
+			currency,
+			currencyDisplay: "narrowSymbol"
+		}).format(numeric);
+	}
+	if (format === "percent") {
+		const normalized = Math.abs(numeric) <= 1 ? numeric : numeric / 100;
+		return new Intl.NumberFormat(getCoreLocale(), {
+			style: "percent",
+			minimumFractionDigits: 1,
+			maximumFractionDigits: 1
+		}).format(normalized);
+	}
+	return new Intl.NumberFormat(getCoreLocale()).format(numeric);
+}
+//#endregion
+//#region packages/dashboard/dashboard/resolvePath.ts
+function resolvePath(source, path) {
+	if (path === void 0 || path === "") return source;
+	if (source === null || source === void 0) return void 0;
+	return path.split(".").reduce((current, segment) => {
+		if (current === null || current === void 0) return void 0;
+		if (typeof current !== "object") return void 0;
+		return current[segment];
+	}, source);
+}
+function resolveArray(source, path) {
+	const value = resolvePath(source, path);
+	if (!Array.isArray(value)) return [];
+	return value.filter((item) => item !== null && typeof item === "object");
+}
+//#endregion
+//#region packages/dashboard/dashboard/widgets/BarChartWidgetView.tsx
+function toNumber$1(value) {
+	const numeric = typeof value === "number" ? value : Number(value);
+	return Number.isFinite(numeric) ? numeric : 0;
+}
+function BarChartWidgetView({ widget, data, loading }) {
+	const rows = resolveArray(data, widget.dataPath);
+	const max = rows.reduce((peak, row) => Math.max(peak, toNumber$1(row[widget.yKey])), 0) || 1;
+	const height = widget.height ?? 200;
+	return /* @__PURE__ */ jsx(StatCard, {
+		title: widget.title,
+		headerExtra: widget.subtitle ? /* @__PURE__ */ jsx("span", {
+			className: "nb-dashboard-widget__subtitle",
+			children: widget.subtitle
+		}) : void 0,
+		menuVisible: widget.menuVisible,
+		isLoading: loading,
+		className: "nb-dashboard-chart-card",
+		children: rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "nb-dashboard-chart-empty",
+			children: "No data"
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "nb-dashboard-bar-chart",
+			style: { height },
+			role: "img",
+			"aria-label": widget.title,
+			children: rows.map((row, index) => {
+				const label = String(row[widget.xKey] ?? "");
+				const value = toNumber$1(row[widget.yKey]);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "nb-dashboard-bar-chart__item",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "nb-dashboard-bar-chart__bar-wrap",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "nb-dashboard-bar-chart__bar",
+							style: { height: `${Math.max(4, value / max * 100)}%` },
+							title: `${label}: ${formatDashboardValue(value, widget.valueFormat)}`
+						})
+					}), /* @__PURE__ */ jsx("span", {
+						className: "nb-dashboard-bar-chart__label",
+						children: label
+					})]
+				}, `${label}-${index}`);
+			})
+		})
+	});
+}
+//#endregion
+//#region packages/dashboard/dashboard/widgets/DonutChartWidgetView.tsx
+const DEFAULT_COLORS = [
+	"var(--accent-color)",
+	"var(--success-color)",
+	"var(--warning-color)",
+	"var(--info-color)",
+	"#6b4fc8",
+	"#c2410c"
+];
+function toNumber(value) {
+	const numeric = typeof value === "number" ? value : Number(value);
+	return Number.isFinite(numeric) ? numeric : 0;
+}
+function DonutChartWidgetView({ widget, data, loading }) {
+	const rows = resolveArray(data, widget.dataPath);
+	const colors = widget.colors ?? DEFAULT_COLORS;
+	const total = rows.reduce((sum, row) => sum + toNumber(row[widget.valueKey]), 0);
+	const centerValue = widget.centerValuePath !== void 0 ? resolvePath(data, widget.centerValuePath) : total;
+	const radius = 38;
+	const stroke = 14;
+	const circumference = 2 * Math.PI * radius;
+	const arcs = rows.reduce((segments, row, index) => {
+		const pct = toNumber(row[widget.valueKey]) / total;
+		const offset = segments.reduce((sum, segment) => sum + segment.dash, 0);
+		segments.push({
+			key: `${String(row[widget.labelKey])}-${index}`,
+			dash: pct * circumference,
+			offset,
+			color: colors[index % colors.length]
+		});
+		return segments;
+	}, []);
+	return /* @__PURE__ */ jsx(StatCard, {
+		title: widget.title,
+		headerExtra: widget.subtitle ? /* @__PURE__ */ jsx("span", {
+			className: "nb-dashboard-widget__subtitle",
+			children: widget.subtitle
+		}) : void 0,
+		menuVisible: widget.menuVisible,
+		isLoading: loading,
+		className: "nb-dashboard-chart-card",
+		children: rows.length === 0 || total <= 0 ? /* @__PURE__ */ jsx("div", {
+			className: "nb-dashboard-chart-empty",
+			children: "No data"
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "nb-dashboard-donut",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "nb-dashboard-donut__chart",
+				role: "img",
+				"aria-label": widget.title,
+				children: [/* @__PURE__ */ jsxs("svg", {
+					viewBox: "0 0 100 100",
+					className: "nb-dashboard-donut__svg",
+					children: [/* @__PURE__ */ jsx("circle", {
+						cx: "50",
+						cy: "50",
+						r: radius,
+						fill: "none",
+						stroke: "var(--surface-3)",
+						strokeWidth: stroke
+					}), arcs.map((arc) => /* @__PURE__ */ jsx("circle", {
+						cx: "50",
+						cy: "50",
+						r: radius,
+						fill: "none",
+						stroke: arc.color,
+						strokeWidth: stroke,
+						strokeDasharray: `${arc.dash} ${circumference - arc.dash}`,
+						strokeDashoffset: -arc.offset,
+						transform: "rotate(-90 50 50)",
+						strokeLinecap: "butt"
+					}, arc.key))]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "nb-dashboard-donut__center",
+					children: [widget.centerLabel && /* @__PURE__ */ jsx("span", {
+						className: "nb-dashboard-donut__center-label",
+						children: widget.centerLabel
+					}), /* @__PURE__ */ jsx("span", {
+						className: "nb-dashboard-donut__center-value",
+						children: formatDashboardValue(centerValue, widget.valueFormat)
+					})]
+				})]
+			}), widget.showLegend !== false && /* @__PURE__ */ jsx("ul", {
+				className: "nb-dashboard-donut__legend",
+				children: rows.map((row, index) => {
+					const label = String(row[widget.labelKey] ?? "");
+					const value = toNumber(row[widget.valueKey]);
+					const pct = total > 0 ? value / total * 100 : 0;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "nb-dashboard-donut__legend-item",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "nb-dashboard-donut__legend-swatch",
+								style: { background: colors[index % colors.length] }
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "nb-dashboard-donut__legend-label",
+								children: label
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "nb-dashboard-donut__legend-value",
+								children: [pct.toFixed(0), "%"]
+							})
+						]
+					}, `${label}-${index}`);
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region packages/dashboard/dashboard/widgets/StatWidgetView.tsx
+function resolveTrend(widget, data) {
+	if (!widget.trend) return { value: null };
+	const raw = widget.trend.valuePath !== void 0 ? resolvePath(data, widget.trend.valuePath) : widget.trend.value;
+	const numeric = typeof raw === "number" ? raw : Number(raw);
+	return {
+		value: Number.isFinite(numeric) ? numeric : null,
+		label: widget.trend.label,
+		invert: widget.trend.invertColors
+	};
+}
+function StatWidgetView({ widget, data, loading }) {
+	const valueText = formatDashboardValue(widget.valuePath !== void 0 ? resolvePath(data, widget.valuePath) : widget.value, widget.format ?? "text");
+	const trend = resolveTrend(widget, data);
+	const trendDirection = trend.value === null || trend.value === 0 ? "flat" : trend.value > 0 ? "up" : "down";
+	const trendClass = trendDirection === "flat" ? "nb-stat-card__delta--flat" : trendDirection === "up" ? trend.invert ? "nb-stat-card__delta--down" : "nb-stat-card__delta--up" : trend.invert ? "nb-stat-card__delta--up" : "nb-stat-card__delta--down";
+	const trendArrow = trendDirection === "up" ? "▲" : trendDirection === "down" ? "▼" : "—";
+	const trendText = trend.value === null ? null : `${trendArrow} ${formatDashboardValue(Math.abs(trend.value), "percent")}${trend.label ? ` ${trend.label}` : ""}`;
+	return /* @__PURE__ */ jsx(StatCard, {
+		title: widget.title,
+		menuVisible: widget.menuVisible,
+		isLoading: loading,
+		className: `nb-dashboard-stat nb-dashboard-stat--${widget.iconTone ?? "accent"}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "nb-dashboard-stat__content",
+			children: [widget.icon && /* @__PURE__ */ jsx("span", {
+				className: `nb-dashboard-stat__icon nb-dashboard-stat__icon--${widget.iconTone ?? "accent"}`,
+				children: /* @__PURE__ */ jsx("i", {
+					className: `ph ${widget.icon}`,
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "nb-dashboard-stat__metrics",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nb-stat-card__value nb-stat-card__value--2xl",
+					children: valueText
+				}), trendText && /* @__PURE__ */ jsx("span", {
+					className: `nb-stat-card__delta ${trendClass}`,
+					children: trendText
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+//#region packages/dashboard/dashboard/widgets/TableWidgetView.tsx
+function renderCell(row, column) {
+	const raw = row[column.key];
+	if (column.badge) {
+		const key = raw == null ? "" : String(raw);
+		return /* @__PURE__ */ jsx(Badge, {
+			variant: column.badge[key] ?? "secondary",
+			size: "sm",
+			children: column.badgeLabels?.[key] ?? key.replace(/_/g, " ")
+		});
+	}
+	return formatDashboardValue(raw, column.format ?? "text");
+}
+function TableWidgetView({ widget, data, loading }) {
+	const rows = resolveArray(data, widget.dataPath);
+	return /* @__PURE__ */ jsx(StatCard, {
+		title: widget.title,
+		headerExtra: /* @__PURE__ */ jsxs("div", {
+			className: "nb-dashboard-table__header-extra",
+			children: [widget.subtitle && /* @__PURE__ */ jsx("span", {
+				className: "nb-dashboard-widget__subtitle",
+				children: widget.subtitle
+			}), widget.viewAll && /* @__PURE__ */ jsx(Link, {
+				to: widget.viewAll.to,
+				className: "nb-dashboard-table__view-all",
+				children: widget.viewAll.label ?? "View all"
+			})]
+		}),
+		menuVisible: widget.menuVisible,
+		isLoading: loading,
+		className: "nb-dashboard-table-card",
+		children: rows.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+			size: "sm",
+			icon: "ph ph-table",
+			title: widget.emptyTitle ?? "No records yet",
+			description: widget.emptyDescription
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "nb-dashboard-table-wrap",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "nb-dashboard-table",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: widget.columns.map((column) => /* @__PURE__ */ jsx("th", {
+					className: column.align ? `nb-dashboard-table__cell--${column.align}` : void 0,
+					children: column.label
+				}, column.key)) }) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: widget.columns.map((column) => /* @__PURE__ */ jsx("td", {
+					className: column.align ? `nb-dashboard-table__cell--${column.align}` : void 0,
+					children: renderCell(row, column)
+				}, column.key)) }, rowIndex)) })]
+			})
+		})
+	});
+}
+//#endregion
+//#region packages/dashboard/dashboard/widgets/WidgetRenderer.tsx
+function WidgetRenderer({ widget, data, loading }) {
+	switch (widget.type) {
+		case "stat": return /* @__PURE__ */ jsx(StatWidgetView, {
+			widget,
+			data,
+			loading
+		});
+		case "bar-chart": return /* @__PURE__ */ jsx(BarChartWidgetView, {
+			widget,
+			data,
+			loading
+		});
+		case "donut-chart": return /* @__PURE__ */ jsx(DonutChartWidgetView, {
+			widget,
+			data,
+			loading
+		});
+		case "table": return /* @__PURE__ */ jsx(TableWidgetView, {
+			widget,
+			data,
+			loading
+		});
+		default: return null;
+	}
+}
+//#endregion
+//#region packages/dashboard/dashboard/DashboardPage.tsx
+function sectionClassName(section) {
+	const layout = section.layout ?? "grid";
+	if (layout === "grid") return (typeof section.columns === "number" ? `repeat(${section.columns}, minmax(0, 1fr))` : section.columns) ? "nb-dashboard-section nb-dashboard-section--grid" : "nb-dashboard-section nb-dashboard-section--grid";
+	return `nb-dashboard-section nb-dashboard-section--${layout}`;
+}
+function sectionStyle(section) {
+	if (section.layout !== "grid" && section.layout !== void 0) return void 0;
+	const columns = typeof section.columns === "number" ? `repeat(${section.columns}, minmax(0, 1fr))` : section.columns;
+	if (!columns) return void 0;
+	return { gridTemplateColumns: String(columns) };
+}
+function DashboardSectionView({ section, data, loading }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: sectionClassName(section),
+		style: sectionStyle(section),
+		"data-section": section.id,
+		children: section.widgets.map((widget) => /* @__PURE__ */ jsx(WidgetRenderer, {
+			widget,
+			data,
+			loading
+		}, widget.id))
+	});
+}
+function DashboardPage({ config }) {
+	const fetched = useDashboardData(config.dataUrl, config.refreshInterval);
+	const { data, loading, error, refetch } = config.useData?.() ?? fetched;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "view-wrapper-scroll nb-dashboard-page",
+		children: [/* @__PURE__ */ jsxs(AppToolbar, {
+			title: config.title,
+			onRefresh: refetch,
+			children: [error && /* @__PURE__ */ jsx("div", {
+				className: "nb-dashboard-page__error",
+				children: error
+			}), config.sections.map((section, index) => /* @__PURE__ */ jsx(DashboardSectionView, {
+				section,
+				data,
+				loading
+			}, section.id ?? `section-${index}`))]
+		}), loading && /* @__PURE__ */ jsx("div", {
+			className: "nb-dashboard-page__loading",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("span", { className: "nb-dashboard-page__spinner" })
+		})]
+	});
+}
+//#endregion
+//#region packages/dashboard/dashboard/widgetBuilders.ts
+function statWidget(config) {
+	return {
+		type: "stat",
+		menuVisible: false,
+		...config
+	};
+}
+function barChartWidget(config) {
+	return {
+		type: "bar-chart",
+		menuVisible: false,
+		valueFormat: "currency",
+		height: 200,
+		...config
+	};
+}
+function donutChartWidget(config) {
+	return {
+		type: "donut-chart",
+		menuVisible: false,
+		showLegend: true,
+		valueFormat: "currency",
+		...config
+	};
+}
+function tableWidget(config) {
+	return {
+		type: "table",
+		menuVisible: false,
+		...config
+	};
+}
+//#endregion
+export { DashboardPage, barChartWidget, defineDashboard, donutChartWidget, formatDashboardValue, resolveArray, resolvePath, statWidget, tableWidget, useDashboardData };