indas-ui 0.1.3 → 0.1.5

package/dist/auth.d.ts

@@ -0,0 +1 @@
+export { AuthSessionProvider } from './components/providers/session-provider.js';

package/dist/auth.js

@@ -0,0 +1,5 @@
+// Auth entry: `import { AuthSessionProvider } from 'indas-ui/auth'`
+// The one entry that needs next-auth (an optional peer dependency): it feeds next-auth's session into
+// the library's session adapter, which every other component reads. Apps on another sign-in system
+// skip this entry and use SessionAdapterProvider from 'indas-ui/providers' instead.
+export { AuthSessionProvider } from './components/providers/session-provider.js';

package/dist/cjs/auth.js

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthSessionProvider = void 0;
+// Auth entry: `import { AuthSessionProvider } from 'indas-ui/auth'`
+// The one entry that needs next-auth (an optional peer dependency): it feeds next-auth's session into
+// the library's session adapter, which every other component reads. Apps on another sign-in system
+// skip this entry and use SessionAdapterProvider from 'indas-ui/providers' instead.
+var session_provider_1 = require("./components/providers/session-provider.js");
+Object.defineProperty(exports, "AuthSessionProvider", { enumerable: true, get: function () { return session_provider_1.AuthSessionProvider; } });

package/dist/cjs/components/chat/ai-messages.js

@@ -16,6 +16,7 @@ const utils_1 = require("../../lib/utils.js");
 const lucide_react_1 = require("lucide-react");
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const number_format_1 = require("../../lib/number-format.js");
 // Individual Message Bubble Component
 function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedback, botAvatar, renderBotContent }) {
     const isUser = message.role === 'user';
@@ -164,7 +165,7 @@ function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedb
                                                 return full;
                                             });
                                             return processed;
-                                        })() }) })) })) })) }), !isEditing && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200', isUser ? 'justify-end' : 'justify-start'), children: [formattedTimestamp && ((0, jsx_runtime_1.jsx)("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerate, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleStartEdit, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Edit message", title: "Edit", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "w-3.5 h-3.5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopy, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Copy message", title: "Copy", children: copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3.5 h-3.5" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerateAi, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('up'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Good response", title: "Good response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('down'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Bad response", title: "Bad response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", message.tokens.prompt.toLocaleString(), "  R: ", message.tokens.completion.toLocaleString(), "  T: ", message.tokens.total.toLocaleString()] }))] }))] })] }));
+                                        })() }) })) })) })) }), !isEditing && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200', isUser ? 'justify-end' : 'justify-start'), children: [formattedTimestamp && ((0, jsx_runtime_1.jsx)("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerate, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleStartEdit, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Edit message", title: "Edit", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "w-3.5 h-3.5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopy, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Copy message", title: "Copy", children: copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3.5 h-3.5" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerateAi, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('up'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Good response", title: "Good response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('down'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Bad response", title: "Bad response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", (0, number_format_1.formatNumber)(message.tokens.prompt), "  R: ", (0, number_format_1.formatNumber)(message.tokens.completion), "  T: ", (0, number_format_1.formatNumber)(message.tokens.total)] }))] }))] })] }));
 }
 // Synthia thinking phrases — the fun ones
 const SYNTHIA_THINKING = [
@@ -266,6 +267,6 @@ function Messages({ messages, isLoading = false, onExport, onShare, onSelectItem
                         }, { prompt: 0, completion: 0, total: 0 });
                         if (totals.total === 0)
                             return (0, jsx_runtime_1.jsx)("div", {});
-                        return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", totals.prompt.toLocaleString(), " \u00B7 C:", totals.completion.toLocaleString(), " \u00B7 T:", totals.total.toLocaleString(), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
+                        return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", (0, number_format_1.formatNumber)(totals.prompt), " \u00B7 C:", (0, number_format_1.formatNumber)(totals.completion), " \u00B7 T:", (0, number_format_1.formatNumber)(totals.total), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                     })() : (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [onExport && ((0, jsx_runtime_1.jsxs)("button", { onClick: onExport, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-4 h-4" }), "Export"] })), onShare && ((0, jsx_runtime_1.jsxs)("button", { onClick: onShare, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { className: "w-4 h-4" }), "Share"] }))] })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-5xl mx-auto px-3 sm:px-4 py-6 space-y-6 animate-[fadeInUp_0.28s_ease-out]", children: [messages.map((message) => ((0, jsx_runtime_1.jsx)(Message, { message: message, onSelectItem: onSelectItem, onEditMessage: onEditMessage, onRegenerateAi: onRegenerateAi, onFeedback: onFeedback, botAvatar: botAvatar, renderBotContent: renderBotContent }, message.id))), isLoading && (0, jsx_runtime_1.jsx)(TypingIndicator, { lastUserMessage: messages.filter(m => m.role === 'user').at(-1)?.content }), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }, fadeKey) })] }));
 }

package/dist/cjs/components/chat/chat.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Domain-specific branding (logo, title, messages) is injected via props.
  */
 const react_1 = require("react");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("../../contexts/SessionAdapterContext.js");
 const navigation_1 = require("next/navigation");
 const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../lib/utils.js");
@@ -21,6 +21,7 @@ const multimodal_input_1 = require("./multimodal-input.js");
 const chat_prompt_navigator_1 = require("./chat-prompt-navigator.js");
 const date_picker_1 = require("../forms/date-picker/index.js");
 const utils_2 = require("../../lib/utils.js");
+const number_format_1 = require("../../lib/number-format.js");
 function buildSendPayload(ctx, message, autoTitle) {
     if (ctx.mode === 'new') {
         return { message, conversationId: undefined, newChat: true, title: autoTitle };
@@ -64,7 +65,7 @@ function bucketForDate(iso, now = new Date()) {
     return { id: `m-${d.getFullYear()}-${d.getMonth()}`, label: monthLabel, sort };
 }
 function Chat({ mode = 'fullpage', externalMuted, title = 'Chat', sidebarTitle, bubbleLogo, logo, MessagesComponent, fullpagePath, onBeforeEditMessage, initialMessage, initialConversationId, headerActions, onMessagesChange }) {
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     const router = (0, navigation_1.useRouter)();
     const alerts = (0, GlobalAlertContext_1.useGlobalAlert)();
     const { t } = (0, LanguageContext_1.useLanguage)();
@@ -1022,7 +1023,7 @@ function Chat({ mode = 'fullpage', externalMuted, title = 'Chat', sidebarTitle,
                                 }, { prompt: 0, completion: 0, total: 0 });
                                 if (totals.total === 0)
                                     return null;
-                                return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["Prompt: ", totals.prompt.toLocaleString(), " \u00B7 Response: ", totals.completion.toLocaleString(), " \u00B7 Total: ", totals.total.toLocaleString(), " tokens \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
+                                return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["Prompt: ", (0, number_format_1.formatNumber)(totals.prompt), " \u00B7 Response: ", (0, number_format_1.formatNumber)(totals.completion), " \u00B7 Total: ", (0, number_format_1.formatNumber)(totals.total), " tokens \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                             })(), (0, jsx_runtime_1.jsxs)("div", { className: "absolute right-3 flex items-center gap-0.5", children: [headerActions, (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsMuted(!isMuted), className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: isMuted ? "Unmute sounds" : "Mute sounds", children: isMuted ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { className: "w-3.5 h-3.5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { className: "w-3.5 h-3.5" }) }), messages.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleExport, className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: t('Export'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-3.5 h-3.5" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleShare, className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: t('Share'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { className: "w-3.5 h-3.5" }) })] })), fullpagePath && mode === 'modal' && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                             const target = currentConversationId
                                                 ? `${fullpagePath}?c=${currentConversationId}`

package/dist/cjs/components/dashboard/FilterBar.js

@@ -220,7 +220,7 @@ const fmtFiscalDay = (d) => `${String(d.getDate()).padStart(2, '0')} ${SHORT_MON
 // Fiscal-year-aware dropdown options. FY runs 1 Apr (fyStart) → 31 Mar (fyStart+1).
 // Weeks are W1..W52/53 counting 7-day spans from 1 Apr; months ordered Apr→Mar;
 // quarters Q1 Apr-Jun … Q4 Jan-Mar; year shown as "YYYY-YYYY".
-function buildTimeOptions(fyStart) {
+function buildTimeOptions(fyStart, allTime = false) {
     const fyOpen = new Date(fyStart, 3, 1);
     const fyClose = new Date(fyStart + 1, 2, 31);
     // Monday-aligned weeks clamped to the FY: W1 = 1 Apr → first Sunday (partial),
@@ -248,7 +248,10 @@ function buildTimeOptions(fyStart) {
         { value: 'Q3', label: `Q3 (Oct – Dec ${fyStart})` },
         { value: 'Q4', label: `Q4 (Jan – Mar ${fyStart + 1})` },
     ];
-    const years = [{ value: `${fyStart}`, label: `${fyStart}-${fyStart + 1}` }];
+    // This financial year and the two before it, newest first; "All Time" last where the host offers it.
+    const years = [0, 1, 2].map(n => ({ value: `${fyStart - n}`, label: `FY ${fyStart - n}-${String(fyStart - n + 1).slice(2)}` }));
+    if (allTime)
+        years.push({ value: 'all', label: 'All Time' });
     return [
         { value: 'Day', label: 'Day', dropdownOptions: DAY_OPTIONS, quickOptions: DAY_QUICK },
         { value: 'Week', label: 'Week', dropdownOptions: weeks, quickOptions: WEEK_QUICK },
@@ -324,11 +327,31 @@ function ForecastControl({ forecast, onForecastChange, timeFilter, onTimeFilterC
                         ? 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'
                         : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]'), title: t('Forecast'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-4 h-4" }), forecast.enabled && !open && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50 w-96 max-w-[calc(100vw-2rem)]', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))] shrink-0", children: t('Forecast') }), onTimeFilterChange ? ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: TIME_FILTER_OPTIONS.map(o => ({ value: o.value, label: t(o.label) })), value: timeFilter, onValueChange: (v) => onTimeFilterChange(v), searchable: false, size: "sm", triggerClassName: "h-6 text-[11px] min-w-[6.5rem]" })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: ["\u00B7 ", t(timeFilter)] }))] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: forecast.enabled, onCheckedChange: (enabled) => onForecastChange({ ...forecast, enabled }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('p-3 space-y-3', !forecast.enabled && 'opacity-50 pointer-events-none'), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: exports.FORECAST_METHODS.map(m => ({ id: m.value, label: t(m.label) })), activeTab: forecast.method, onTabChange: (tabId) => onForecastChange({ ...forecast, method: tabId }), variant: "rounded", size: "sm", fullWidth: true }), activeMethod && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: t(activeMethod.hint) })), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Based On Last') }), (0, jsx_runtime_1.jsx)(Stepper, { value: forecast.period, min: limits.min, max: limits.max, onChange: setPeriod }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.period, -1) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Forecast Ahead') }), (0, jsx_runtime_1.jsx)(Stepper, { value: forecast.horizon, min: horizonLimits.min, max: horizonLimits.max, onChange: setHorizon }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.horizon, 1) })] })] })] })] }))] }));
 }
-function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = 'Week', onTimeFilterChange, timeFilterSelection, onTimeFilterSelectionChange, hideTimeFilter = false, filters = [], filterValues = {}, onFilterChange, dateFrom, dateTo, onDateFromChange, onDateToChange, onApply, onReset, reports = [], onReportSelect, onExport, hideFilterButton = false, hideDateRange = false, showApplyButton = false, forecast, onForecastChange, onShare, showInsights = false, insightsActive = false, onInsightsClick, children, className, layout = 'default', fiscalStartYear }) {
+function FilterBar({ title, contextLabel, description, secondaryToggle, timeFilter = 'Week', onTimeFilterChange, timeFilterSelection, onTimeFilterSelectionChange, hideTimeFilter = false, filters = [], filterValues = {}, onFilterChange, dateFrom, dateTo, onDateFromChange, onDateToChange, onApply, onReset, reports = [], onReportSelect, onExport, hideFilterButton = false, hideDateRange = false, showApplyButton = false, forecast, onForecastChange, onShare, showInsights = false, insightsActive = false, onInsightsClick, children, className, layout = 'default', fiscalStartYear, allTime = false, }) {
     const [popoverOpen, setPopoverOpen] = (0, react_1.useState)(false);
     const popoverRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
-    const timeOptions = (0, react_1.useMemo)(() => (fiscalStartYear ? buildTimeOptions(fiscalStartYear) : TIME_FILTER_OPTIONS), [fiscalStartYear]);
+    // The divider between the secondary toggle and the time tabs only makes sense while they share a
+    // line. When the row wraps (narrow screens, long toggle labels), it would be left hanging at the
+    // end of the first line, so it hides.
+    const toggleRef = (0, react_1.useRef)(null);
+    const timeTabsRef = (0, react_1.useRef)(null);
+    const [tabsWrapped, setTabsWrapped] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const a = toggleRef.current;
+        const b = timeTabsRef.current;
+        if (!a || !b || typeof ResizeObserver === 'undefined')
+            return;
+        const check = () => setTabsWrapped(a.offsetTop !== b.offsetTop);
+        const ro = new ResizeObserver(check);
+        ro.observe(a);
+        ro.observe(b);
+        if (a.parentElement)
+            ro.observe(a.parentElement);
+        check();
+        return () => ro.disconnect();
+    }, [secondaryToggle, hideTimeFilter]);
+    const timeOptions = (0, react_1.useMemo)(() => (fiscalStartYear ? buildTimeOptions(fiscalStartYear, allTime) : TIME_FILTER_OPTIONS), [fiscalStartYear, allTime]);
     // Handle click outside. Ignore clicks landing inside a portalled dropdown/select
     // list (rendered to document.body, outside popoverRef) so selecting a filter
     // option doesn't close this popover before the value commits.
@@ -391,10 +414,10 @@ function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = 'Week',
                                             ...(filter === 'Year' && { years: selectedValues }),
                                         };
                                         onTimeFilterSelectionChange?.(newSelection);
-                                    } }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title }), contextLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: contextLabel }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [!hideFilterButton && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: (0, utils_1.cn)('w-8 h-8 rounded-md flex items-center justify-center transition-colors relative', 'border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]', popoverOpen && 'bg-[rgb(var(--color-primary))] text-white border-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${filters.length}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange })), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" })), (reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] })] }) }) }));
+                                    } }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title }), contextLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: contextLabel })), description && (0, jsx_runtime_1.jsx)("p", { className: "mt-0.5 text-xs text-[rgb(var(--fg-muted))]", children: description })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [!hideFilterButton && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: (0, utils_1.cn)('w-8 h-8 rounded-md flex items-center justify-center transition-colors relative', 'border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]', popoverOpen && 'bg-[rgb(var(--color-primary))] text-white border-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${filters.length}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange })), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" })), (reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] })] }) }) }));
     }
     // Default layout: Title centered, controls on right
-    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', 'px-4 py-3 lg:px-6', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-base sm:text-xl font-bold text-[rgb(var(--fg-default))] leading-tight truncate", children: title }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "hidden sm:inline-flex items-center gap-1.5 shrink-0 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [secondaryToggle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" }) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block h-4 w-px bg-[rgb(var(--bd-default))] self-center" })] })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', 'px-4 py-3 lg:px-6', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-auto min-w-0 flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-base sm:text-xl font-bold text-[rgb(var(--fg-default))] leading-tight truncate", children: title }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "hidden sm:inline-flex items-center gap-1.5 shrink-0 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-x-3 gap-y-2", children: [secondaryToggle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('hidden h-4 w-px bg-[rgb(var(--bd-default))] self-center', !tabsWrapped && 'sm:block') })] })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)("div", { ref: timeTabsRef, className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
                                         Day: timeFilterSelection?.days || [],
                                         Week: timeFilterSelection?.weeks || [],
                                         Month: timeFilterSelection?.months || [],
@@ -413,7 +436,7 @@ function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = 'Week',
                                         onTimeFilterSelectionChange?.(newSelection);
                                     } }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-0.5 rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-0.5", children: [!hideFilterButton && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: (0, utils_1.cn)('w-7 h-7 rounded-md flex items-center justify-center transition-colors relative', popoverOpen
                                                     ? 'bg-[rgb(var(--color-primary))] text-white shadow-sm'
-                                                    : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${Math.min(filters.length, 3)}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange, bare: true })), (showInsights || reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { showInsights: showInsights, insightsActive: insightsActive, onInsightsClick: onInsightsClick, reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] }), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" }))] })] }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "sm:hidden mt-2 inline-flex items-center gap-1.5 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] })), (!hideTimeFilter || secondaryToggle) && ((0, jsx_runtime_1.jsxs)("div", { className: "sm:hidden mt-2 flex items-center gap-2 overflow-x-auto", children: [secondaryToggle && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+                                                    : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${Math.min(filters.length, 3)}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange, bare: true })), (showInsights || reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { showInsights: showInsights, insightsActive: insightsActive, onInsightsClick: onInsightsClick, reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] }), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" }))] })] }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "sm:hidden mt-2 inline-flex items-center gap-1.5 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] })), (!hideTimeFilter || secondaryToggle) && ((0, jsx_runtime_1.jsxs)("div", { className: "sm:hidden mt-2 flex flex-col items-start gap-2", children: [secondaryToggle && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
                             Day: timeFilterSelection?.days || [],
                             Week: timeFilterSelection?.weeks || [],
                             Month: timeFilterSelection?.months || [],
@@ -430,5 +453,5 @@ function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = 'Week',
                                 ...(filter === 'Year' && { years: selectedValues }),
                             };
                             onTimeFilterSelectionChange?.(newSelection);
-                        } }))] }))] }));
+                        } }))] })), description && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-[rgb(var(--fg-muted))]", children: description })] }));
 }

package/dist/cjs/components/dashboard/charts/Area.js

@@ -8,6 +8,7 @@ exports.AreaChart = AreaChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 // Convert any color (hex, rgb(), rgba(), space-separated rgb()) to rgba() with given alpha (0–1).
 // Hex+alpha-suffix concat (e.g. color + 'cc') breaks for non-hex inputs and crashes canvas gradients.
 function withAlpha(color, alpha) {
@@ -37,10 +38,11 @@ function withAlpha(color, alpha) {
 /**
  * AreaChart - ECharts Area Chart component
  */
-function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, className }) {
+function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, valueFormatter, axisFormatter, className }) {
     const option = {
         tooltip: {
             trigger: 'axis',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? number_format_1.formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.95)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -76,13 +78,13 @@ function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGr
         },
         yAxis: series.some(s => s.secondaryAxis)
             ? [
-                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
-                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: false } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) }, splitLine: { show: false } },
             ]
             : {
                 type: 'value',
                 axisLine: { show: false },
-                axisLabel: { color: '#6c757d', fontSize: 11 },
+                axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) },
                 splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } }
             },
         series: series.map((s, index) => {

package/dist/cjs/components/dashboard/charts/Bar.js

@@ -8,10 +8,11 @@ exports.BarChart = BarChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * BarChart - ECharts Bar Chart component
  */
-function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, className }) {
+function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, valueFormatter, axisFormatter, className }) {
     // Bullet mode: horizontal KPI-vs-target rows (CSS-rendered, not ECharts).
     if (horizontal && targetKey) {
         const actualKey = series[0]?.key;
@@ -31,13 +32,14 @@ function BarChart({ data, xKey, series, height = 300, showLegend = true, showGri
                     : met
                         ? 'linear-gradient(90deg, #34d399 0%, #10b981 100%)'
                         : 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)';
-                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1 h-4 rounded-full ring-2 ring-[rgb(var(--bg-surface))]", style: { left: `${targetPct}%`, backgroundColor: '#475569' }, title: `Target: ${target.toLocaleString()}` })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [(0, jsx_runtime_1.jsx)("span", { children: actual.toLocaleString() }), (0, jsx_runtime_1.jsx)("span", { children: `Target ${target.toLocaleString()}` })] })] }, `${name}-${idx}`));
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1 h-4 rounded-full ring-2 ring-[rgb(var(--bg-surface))]", style: { left: `${targetPct}%`, backgroundColor: '#475569' }, title: `Target: ${(0, number_format_1.formatNumber)(target)}` })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, number_format_1.formatNumber)(actual) }), (0, jsx_runtime_1.jsx)("span", { children: `Target ${(0, number_format_1.formatNumber)(target)}` })] })] }, `${name}-${idx}`));
             }) }));
     }
     const categoryData = data.map(item => item[xKey]);
     const option = {
         tooltip: {
             trigger: 'item',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? number_format_1.formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.98)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -70,7 +72,7 @@ function BarChart({ data, xKey, series, height = 300, showLegend = true, showGri
             type: horizontal ? 'value' : 'category',
             data: horizontal ? undefined : categoryData,
             axisLine: { lineStyle: { color: '#dee2e6' } },
-            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisLabel: horizontal ? { color: '#6c757d', fontSize: 11, hideOverlap: true, alignMaxLabel: 'right', formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) } : { color: '#6c757d', fontSize: 11 },
             axisTick: { show: false },
             splitLine: horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
@@ -80,7 +82,7 @@ function BarChart({ data, xKey, series, height = 300, showLegend = true, showGri
             type: horizontal ? 'category' : 'value',
             data: horizontal ? categoryData : undefined,
             axisLine: { show: false },
-            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisLabel: horizontal ? { color: '#6c757d', fontSize: 11 } : { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) },
             splitLine: !horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
             } : { show: false }

package/dist/cjs/components/dashboard/charts/FlowMap.js

@@ -45,6 +45,7 @@ const echarts = __importStar(require("echarts/core"));
 const utils_1 = require("../../../lib/utils.js");
 const india_map_1 = require("./india-map.js");
 const theme_1 = require("./theme.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * FlowMap - Geographic flow/route visualization
  *
@@ -200,7 +201,7 @@ function FlowMap({ markers = [], lines = [], height = 400, markerColor = '#5470c
                 }
                 if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
                     const value = params.value?.[2];
-                    return `<strong>${params.name}</strong>${value ? `<br/>Value: ${value.toLocaleString()}` : ''}`;
+                    return `<strong>${params.name}</strong>${value ? `<br/>Value: ${(0, number_format_1.formatNumber)(value)}` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

package/dist/cjs/components/dashboard/charts/Funnel.js

@@ -5,6 +5,7 @@ exports.FunnelChart = FunnelChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 const FUNNEL_COLORS = ['#5470c6', '#3ba272', '#fac858', '#ee6666', '#73c0de', '#9a60b4', '#fc8452', '#91cc75'];
 /**
  * FunnelChart — centered, tapering stage-bar funnel for conversion/process flows.
@@ -33,6 +34,6 @@ function FunnelChart({ data, height = 300, sort = 'descending', className }) {
                                 background: `linear-gradient(90deg, ${color}, ${color}cc)`,
                                 transform: isHover ? 'translateY(-1px)' : 'none',
                                 boxShadow: isHover ? `0 4px 14px ${color}55` : `0 1px 2px rgba(0,0,0,0.06)`,
-                            }, title: `${item.name}: ${item.value.toLocaleString()} (${pct.toFixed(1)}%)`, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: item.value.toLocaleString() })] }) })] }, item.name));
+                            }, title: `${item.name}: ${(0, number_format_1.formatNumber)(item.value)} (${pct.toFixed(1)}%)`, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: (0, number_format_1.formatNumber)(item.value) })] }) })] }, item.name));
         }) }));
 }

package/dist/cjs/components/dashboard/charts/GeoMap.js

@@ -44,6 +44,7 @@ const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const echarts = __importStar(require("echarts/core"));
 const utils_1 = require("../../../lib/utils.js");
 const india_map_1 = require("./india-map.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * GeoMap - Geographic scatter/bubble map for India
  * Shows location markers with optional size based on values
@@ -86,7 +87,7 @@ function GeoMap({ markers = [], height = 400, markerColor = '#5470c6', markerSiz
             formatter: (params) => {
                 if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
                     const value = params.value?.[2];
-                    return `<strong>${params.name}</strong>${value ? `<br/>Production: ${value.toLocaleString()} units` : ''}`;
+                    return `<strong>${params.name}</strong>${value ? `<br/>Production: ${(0, number_format_1.formatNumber)(value)} units` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

package/dist/cjs/components/dashboard/charts/Line.js

@@ -9,16 +9,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
 const theme_1 = require("./theme.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * LineChart - ECharts Line Chart component (no area fill)
  */
-function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, className }) {
+function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, valueFormatter, axisFormatter, className }) {
     const theme = (0, theme_1.getChartTheme)();
     const axisConfig = (0, theme_1.getAxisConfig)();
     const option = {
         tooltip: {
             trigger: 'axis',
-            ...(0, theme_1.getTooltipConfig)()
+            ...(0, theme_1.getTooltipConfig)(),
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? number_format_1.formatNumber)(v) : String(v ?? '')),
         },
         legend: showLegend ? (0, theme_1.getLegendConfig)('top') : undefined,
         grid: (0, theme_1.getGridConfig)(showLegend),
@@ -33,7 +35,7 @@ function LineChart({ data, xKey, series, height = 300, showLegend = true, showGr
             min: yMin,
             max: yMax,
             axisLine: { show: false },
-            axisLabel: axisConfig.axisLabel,
+            axisLabel: { ...axisConfig.axisLabel, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) },
             splitLine: {
                 show: showGrid,
                 ...axisConfig.splitLine

package/dist/cjs/components/dashboard/charts/Pareto.js

@@ -8,6 +8,7 @@ exports.ParetoChart = ParetoChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * ParetoChart - Combined bar and line chart showing values and cumulative percentage
  * Used for identifying the "vital few" from the "trivial many" (80/20 rule)
@@ -34,7 +35,7 @@ function ParetoChart({ data, height = 300, showLegend = true, barColor = '#5470c
                 const bar = params.find((p) => p.seriesType === 'bar');
                 const line = params.find((p) => p.seriesType === 'line');
                 return `${bar?.name}<br/>
-          Value: ${bar?.value?.toLocaleString()}<br/>
+          Value: ${(0, number_format_1.formatNumber)(bar?.value)}<br/>
           Cumulative: ${line?.value}%`;
             }
         },

package/dist/cjs/components/dashboard/charts/Sankey.js

@@ -8,6 +8,7 @@ exports.SankeyChart = SankeyChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * SankeyChart - Flow/relationship visualization
  * Great for: Material flow, process flow, cost flow, conversion funnels
@@ -41,9 +42,9 @@ function SankeyChart({ nodes, links, height = 300, orient = 'horizontal', nodeWi
             textStyle: { color: '#344767', fontSize: 12 },
             formatter: (params) => {
                 if (params.dataType === 'edge') {
-                    return `<strong>${params.data.source}</strong> → <strong>${params.data.target}</strong><br/>Value: ${params.data.value?.toLocaleString()}`;
+                    return `<strong>${params.data.source}</strong> → <strong>${params.data.target}</strong><br/>Value: ${(0, number_format_1.formatNumber)(params.data.value)}`;
                 }
-                return `<strong>${params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+                return `<strong>${params.name}</strong><br/>Value: ${(0, number_format_1.formatNumber)(params.value) || '-'}`;
             }
         },
         series: [{
@@ -79,7 +80,7 @@ function SankeyChart({ nodes, links, height = 300, orient = 'horizontal', nodeWi
                     color: '#344767',
                     fontSize: 11,
                     fontWeight: 500,
-                    formatter: (p) => `${p.name} (${p.value?.toLocaleString() ?? '-'})`
+                    formatter: (p) => `${p.name} (${(0, number_format_1.formatNumber)(p.value) || '-'})`
                 },
                 data: nodesWithColors,
                 links: links.map(link => ({

package/dist/cjs/components/dashboard/charts/Sparkline.js

@@ -8,6 +8,7 @@ exports.Sparkline = Sparkline;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 // Convert any color (hex, rgb(), rgba(), space-separated rgb()) to rgba() with given alpha (0–1).
 // Hex+alpha-suffix concat (e.g. color + '40') breaks for non-hex inputs and crashes canvas gradients.
 function withAlpha(color, alpha) {
@@ -103,7 +104,7 @@ function Sparkline({ data, type = 'line', height = 40, width = '100%', color = '
             formatter: (params) => {
                 const p = Array.isArray(params) ? params[0] : params;
                 const cat = hasLabels && p.axisValue ? `${p.axisValue}<br/>` : '';
-                return `${cat}<strong>${valuePrefix}${Number(p.value).toLocaleString()}${valueSuffix}</strong>`;
+                return `${cat}<strong>${valuePrefix}${(0, number_format_1.formatNumber)(Number(p.value))}${valueSuffix}</strong>`;
             }
         } : undefined,
         grid: {

package/dist/cjs/components/dashboard/charts/Treemap.js

@@ -8,6 +8,7 @@ exports.TreemapChart = TreemapChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * TreemapChart - Hierarchical data visualization
  * Great for: Cost breakdown, category distribution, budget allocation
@@ -28,7 +29,7 @@ function TreemapChart({ data, height = 300, showBreadcrumb = false, colors = ['#
                     .map((node) => node.name)
                     .filter((name) => name)
                     .join(' → ');
-                return `<strong>${path || params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+                return `<strong>${path || params.name}</strong><br/>Value: ${(0, number_format_1.formatNumber)(params.value) || '-'}`;
             }
         },
         series: [{

package/dist/cjs/components/dashboard/charts/index.js

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartCard = exports.FlowMap = exports.GanttChart = exports.Sparkline = exports.SankeyChart = exports.TreemapChart = exports.GeoMap = exports.BoxPlotChart = exports.BubbleChart = exports.ParetoChart = exports.ScatterChart = exports.HeatmapChart = exports.FunnelChart = exports.RadarChart = exports.LineChart = exports.GaugeChart = exports.DonutChart = exports.BarChart = exports.AreaChart = void 0;
+exports.getNumberLocale = exports.setNumberLocale = exports.formatCompactNumber = exports.formatNumber = exports.ChartCard = exports.FlowMap = exports.GanttChart = exports.Sparkline = exports.SankeyChart = exports.TreemapChart = exports.GeoMap = exports.BoxPlotChart = exports.BubbleChart = exports.ParetoChart = exports.ScatterChart = exports.HeatmapChart = exports.FunnelChart = exports.RadarChart = exports.LineChart = exports.GaugeChart = exports.DonutChart = exports.BarChart = exports.AreaChart = void 0;
 // ECharts Components
 var Area_1 = require("./Area.js");
 Object.defineProperty(exports, "AreaChart", { enumerable: true, get: function () { return Area_1.AreaChart; } });
@@ -43,3 +43,9 @@ Object.defineProperty(exports, "FlowMap", { enumerable: true, get: function () {
 // Chart Wrapper
 var DashboardCard_1 = require("./DashboardCard.js");
 Object.defineProperty(exports, "ChartCard", { enumerable: true, get: function () { return DashboardCard_1.ChartCard; } });
+// Number formatting: Indian grouping by default; setNumberLocale() switches it for a whole app
+var number_format_1 = require("../../../lib/number-format.js");
+Object.defineProperty(exports, "formatNumber", { enumerable: true, get: function () { return number_format_1.formatNumber; } });
+Object.defineProperty(exports, "formatCompactNumber", { enumerable: true, get: function () { return number_format_1.formatCompactNumber; } });
+Object.defineProperty(exports, "setNumberLocale", { enumerable: true, get: function () { return number_format_1.setNumberLocale; } });
+Object.defineProperty(exports, "getNumberLocale", { enumerable: true, get: function () { return number_format_1.getNumberLocale; } });

package/dist/cjs/components/dashboard/kpi/KpiBreakdown.js

@@ -5,6 +5,7 @@ exports.KpiBreakdown = KpiBreakdown;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../../lib/utils.js");
 const kpi_shell_1 = require("./kpi-shell.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * KpiBreakdown - KPI card with list breakdown
  *
@@ -32,11 +33,11 @@ function KpiBreakdown({ title, total, items, showPercentage = false, loading, co
     };
     const totalValue = typeof total === 'number' ? total :
         items.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && ((0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? total.toLocaleString() : total }))] }), (0, jsx_runtime_1.jsx)("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && ((0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? (0, number_format_1.formatNumber)(total) : total }))] }), (0, jsx_runtime_1.jsx)("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
                     const colorClass = getColorClass(item.color);
                     const isCustomColor = item.color?.startsWith('#') || item.color?.startsWith('rgb');
                     const numValue = typeof item.value === 'number' ? item.value : 0;
                     const percentage = totalValue > 0 ? Math.round((numValue / totalValue) * 100) : 0;
-                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }), showPercentage && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? (0, number_format_1.formatNumber)(item.value) : item.value }), showPercentage && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
                 }) })] }));
 }

package/dist/cjs/components/dashboard/kpi/KpiComparison.js

@@ -5,6 +5,7 @@ exports.KpiComparison = KpiComparison;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../../lib/utils.js");
 const kpi_shell_1 = require("./kpi-shell.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * KpiComparison - KPI card with comparison progress bars
  *
@@ -37,5 +38,5 @@ function KpiComparison({ title, value, target, status, bars, loading, className
                 return 'bg-[rgb(var(--color-error))]/10 text-[rgb(var(--color-error))]';
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? bar.value.toLocaleString() : bar.value })] }, index))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? (0, number_format_1.formatNumber)(bar.value) : bar.value })] }, index))) })] }));
 }