indas-ui 0.1.3 → 0.1.5

package/dist/cjs/hooks/useApproval.js

@@ -23,13 +23,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useApproval = useApproval;
 const react_1 = require("react");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("../contexts/SessionAdapterContext.js");
 const approval_1 = require("../lib/api/approval/index.js");
 /**
  * useApproval Hook
  */
 function useApproval() {
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     // State
     const [pendingApprovals, setPendingApprovals] = (0, react_1.useState)([]);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);

package/dist/cjs/hooks/useBusinessAudit.js

@@ -17,10 +17,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBusinessAudit = useBusinessAudit;
 const react_1 = require("react");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("../contexts/SessionAdapterContext.js");
 const audit_1 = require("../lib/api/activity/audit/index.js");
 function useBusinessAudit() {
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     const [isLogging, setIsLogging] = (0, react_1.useState)(false);
     const logAction = (0, react_1.useCallback)(async (action, module, details) => {
         if (!session)

package/dist/cjs/hooks/useDraft.js

@@ -22,13 +22,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDraft = useDraft;
 const react_1 = require("react");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("../contexts/SessionAdapterContext.js");
 const draft_1 = require("../lib/api/draft/index.js");
 /**
  * useDraft Hook - Milestone Based
  */
 function useDraft(module, currentState) {
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     // State
     const [drafts, setDrafts] = (0, react_1.useState)([]);
     const [isLoadingDrafts, setIsLoadingDrafts] = (0, react_1.useState)(false);

package/dist/cjs/lib/api/utility/menu.js

@@ -10,15 +10,16 @@ exports.fetchDynamicMenuModules = fetchDynamicMenuModules;
 exports.groupAndSortModules = groupAndSortModules;
 exports.getDynamicNavigation = getDynamicNavigation;
 const client_1 = __importDefault(require("../core/client.js"));
-const react_1 = require("next-auth/react");
 /**
  * Fetch dynamic menu modules from external API
- * Now uses APIClient for proper authentication with company credentials
+ * Now uses APIClient for proper authentication with company credentials.
+ *
+ * The caller passes the session (from useSessionAdapter, which AuthSessionProvider fills from
+ * next-auth) rather than this module calling next-auth's getSession: importing next-auth here made
+ * every app installing indas-ui install next-auth too, since nearly every entry reaches this file.
  */
-async function fetchDynamicMenuModules(companyId, userId) {
+async function fetchDynamicMenuModules(companyId, userId, session) {
     try {
-        // Get session to pass to APIClient for company credentials
-        const session = await (0, react_1.getSession)();
         if (!session) {
             return [];
         }
@@ -127,10 +128,10 @@ function groupAndSortModules(modules) {
 /**
  * Get dynamic navigation structure for sidebar
  */
-async function getDynamicNavigation(companyId, userId) {
+async function getDynamicNavigation(companyId, userId, session) {
     if (!companyId || !userId) {
         return [];
     }
-    const modules = await fetchDynamicMenuModules(companyId, userId);
+    const modules = await fetchDynamicMenuModules(companyId, userId, session);
     return groupAndSortModules(modules);
 }

package/dist/cjs/lib/number-format.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+/**
+ * How every number in the library is written. Indian grouping by default (20,00,000, not
+ * 2,000,000): the products built on this library keep Indian books, and a bare `toLocaleString()`
+ * follows whatever locale the browser happens to be set to, so the same figure read differently on
+ * two machines.
+ *
+ * A product that needs another convention calls `setNumberLocale()` once at start-up.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setNumberLocale = setNumberLocale;
+exports.getNumberLocale = getNumberLocale;
+exports.formatNumber = formatNumber;
+exports.formatCompactNumber = formatCompactNumber;
+let numberLocale = 'en-IN';
+function setNumberLocale(locale) {
+    numberLocale = locale;
+}
+function getNumberLocale() {
+    return numberLocale;
+}
+/** A full number with grouping, up to two decimals. Empty for null, undefined or NaN. */
+function formatNumber(value, maximumFractionDigits = 2) {
+    if (value == null || value === '')
+        return '';
+    const n = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(n))
+        return typeof value === 'string' ? value : '';
+    return n.toLocaleString(numberLocale, { maximumFractionDigits });
+}
+const trim = (n) => n.toFixed(n >= 100 ? 0 : n >= 10 ? 1 : 2).replace(/\.?0+$/, '');
+/**
+ * A short number for chart axes, where a full figure runs into its neighbour: 12,500 · 20 L ·
+ * 1.4 Cr in Indian grouping; 12.5K · 2M · 1.4B otherwise. Below a lakh (or a thousand) it is the
+ * full number.
+ */
+function formatCompactNumber(value) {
+    if (value == null || value === '')
+        return '';
+    const n = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(n))
+        return String(value);
+    const sign = n < 0 ? '-' : '';
+    const a = Math.abs(n);
+    if (numberLocale === 'en-IN') {
+        if (a >= 1e7)
+            return `${sign}${trim(a / 1e7)} Cr`;
+        if (a >= 1e5)
+            return `${sign}${trim(a / 1e5)} L`;
+        return formatNumber(n, 0);
+    }
+    if (a >= 1e9)
+        return `${sign}${trim(a / 1e9)}B`;
+    if (a >= 1e6)
+        return `${sign}${trim(a / 1e6)}M`;
+    if (a >= 1e3)
+        return `${sign}${trim(a / 1e3)}K`;
+    return formatNumber(n, 0);
+}

package/dist/cjs/lib/utils.js

@@ -11,11 +11,12 @@ exports.getModuleRoutePath = getModuleRoutePath;
 exports.naturalCompare = naturalCompare;
 const clsx_1 = require("clsx");
 const tailwind_merge_1 = require("tailwind-merge");
+const number_format_1 = require("./number-format.js");
 function cn(...inputs) {
     return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
 }
-function formatCurrency(amount, currency = 'USD') {
-    return new Intl.NumberFormat('en-US', {
+function formatCurrency(amount, currency = 'INR') {
+    return new Intl.NumberFormat((0, number_format_1.getNumberLocale)(), {
         style: 'currency',
         currency,
     }).format(amount);
@@ -28,7 +29,7 @@ function formatDate(date) {
     }).format(new Date(date));
 }
 function formatNumber(num, decimals = 0) {
-    return new Intl.NumberFormat('en-US', {
+    return new Intl.NumberFormat((0, number_format_1.getNumberLocale)(), {
         minimumFractionDigits: decimals,
         maximumFractionDigits: decimals,
     }).format(num);

package/dist/cjs/providers.js

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cn = exports.QueryProvider = exports.useAPI = exports.APIProvider = exports.AuthSessionProvider = exports.useSessionAdapter = exports.SessionAdapterProvider = exports.useCurrency = exports.CurrencyProvider = exports.usePageTitle = exports.PageTitleProvider = exports.useSearchPreferences = exports.SearchPreferencesProvider = exports.useDevice = exports.DeviceProvider = exports.useLanguage = exports.LanguageProvider = exports.useAppConfig = exports.AppConfigProvider = exports.useQuickAlert = exports.useGlobalAlert = exports.GlobalAlertProvider = exports.ThemeContext = exports.ThemeScript = exports.ThemeProvider = void 0;
+exports.cn = exports.QueryProvider = exports.useAPI = exports.APIProvider = exports.useSessionAdapter = exports.SessionAdapterProvider = exports.useCurrency = exports.CurrencyProvider = exports.usePageTitle = exports.PageTitleProvider = exports.useSearchPreferences = exports.SearchPreferencesProvider = exports.useDevice = exports.DeviceProvider = exports.useLanguage = exports.LanguageProvider = exports.useAppConfig = exports.AppConfigProvider = exports.useQuickAlert = exports.useGlobalAlert = exports.GlobalAlertProvider = exports.ThemeContext = exports.ThemeScript = exports.ThemeProvider = void 0;
 // Providers entry: `import { ThemeProvider } from 'indas-ui/providers'`
 var ThemeContext_1 = require("./contexts/ThemeContext.js");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeContext_1.ThemeProvider; } });
@@ -32,8 +32,8 @@ Object.defineProperty(exports, "useCurrency", { enumerable: true, get: function
 var SessionAdapterContext_1 = require("./contexts/SessionAdapterContext.js");
 Object.defineProperty(exports, "SessionAdapterProvider", { enumerable: true, get: function () { return SessionAdapterContext_1.SessionAdapterProvider; } });
 Object.defineProperty(exports, "useSessionAdapter", { enumerable: true, get: function () { return SessionAdapterContext_1.useSessionAdapter; } });
-var session_provider_1 = require("./components/providers/session-provider.js");
-Object.defineProperty(exports, "AuthSessionProvider", { enumerable: true, get: function () { return session_provider_1.AuthSessionProvider; } });
+// AuthSessionProvider is in 'indas-ui/auth': it is the one part built on next-auth, which apps
+// install only when they use it.
 var api_provider_1 = require("./components/providers/api-provider.js");
 Object.defineProperty(exports, "APIProvider", { enumerable: true, get: function () { return api_provider_1.APIProvider; } });
 Object.defineProperty(exports, "useAPI", { enumerable: true, get: function () { return api_provider_1.useAPI; } });

package/dist/components/auth/index.js

@@ -1,3 +1,2 @@
-'use client';
 export { ProtectedRoute } from './ProtectedRoute.js';
 export { UnauthorizedPage, MobileUnavailablePage } from './UnauthorizedPage.js';

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

@@ -10,6 +10,7 @@ import { cn } from '../../lib/utils.js';
 import { User, Copy, Check, Download, Share2, Pencil, Bot, RotateCcw, ThumbsUp, ThumbsDown } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { formatNumber } from '../../lib/number-format.js';
 // Individual Message Bubble Component
 function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedback, botAvatar, renderBotContent }) {
     const isUser = message.role === 'user';
@@ -158,7 +159,7 @@ function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedb
                                                 return full;
                                             });
                                             return processed;
-                                        })() }) })) })) })) }), !isEditing && (_jsxs("div", { className: 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 && (_jsx("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && (_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: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && (_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: _jsx(Pencil, { className: "w-3.5 h-3.5" }) })), _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 ? (_jsx(Check, { className: "w-3.5 h-3.5" })) : (_jsx(Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && (_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: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && (_jsxs(_Fragment, { children: [_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: _jsx(ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), _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: _jsx(ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && (_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 && (_jsxs("div", { className: 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 && (_jsx("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && (_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: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && (_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: _jsx(Pencil, { className: "w-3.5 h-3.5" }) })), _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 ? (_jsx(Check, { className: "w-3.5 h-3.5" })) : (_jsx(Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && (_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: _jsx(RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && (_jsxs(_Fragment, { children: [_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: _jsx(ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), _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: _jsx(ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", formatNumber(message.tokens.prompt), "  R: ", formatNumber(message.tokens.completion), "  T: ", formatNumber(message.tokens.total)] }))] }))] })] }));
 }
 // Synthia thinking phrases — the fun ones
 const SYNTHIA_THINKING = [
@@ -260,6 +261,6 @@ export function Messages({ messages, isLoading = false, onExport, onShare, onSel
                         }, { prompt: 0, completion: 0, total: 0 });
                         if (totals.total === 0)
                             return _jsx("div", {});
-                        return (_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 (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", formatNumber(totals.prompt), " \u00B7 C:", formatNumber(totals.completion), " \u00B7 T:", formatNumber(totals.total), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                     })() : _jsx("div", {}), _jsxs("div", { className: "flex gap-2", children: [onExport && (_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: [_jsx(Download, { className: "w-4 h-4" }), "Export"] })), onShare && (_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: [_jsx(Share2, { className: "w-4 h-4" }), "Share"] }))] })] })), _jsx("div", { className: "flex-1 overflow-y-auto", children: _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) => (_jsx(Message, { message: message, onSelectItem: onSelectItem, onEditMessage: onEditMessage, onRegenerateAi: onRegenerateAi, onFeedback: onFeedback, botAvatar: botAvatar, renderBotContent: renderBotContent }, message.id))), isLoading && _jsx(TypingIndicator, { lastUserMessage: messages.filter(m => m.role === 'user').at(-1)?.content }), _jsx("div", { ref: bottomRef })] }, fadeKey) })] }));
 }

package/dist/components/chat/chat.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Domain-specific branding (logo, title, messages) is injected via props.
  */
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { useSession } from 'next-auth/react';
+import { useOptionalSessionAdapter } from '../../contexts/SessionAdapterContext.js';
 import { useRouter } from 'next/navigation';
 import { X, Plus, Maximize2, Download, Share2, Volume2, VolumeX, Bot, PanelLeftOpen, Star, Pencil, Trash2, ChevronDown, Search, Calendar } from 'lucide-react';
 import { cn } from '../../lib/utils.js';
@@ -18,6 +18,7 @@ import { MultimodalInput } from './multimodal-input.js';
 import { ChatPromptNavigator } from './chat-prompt-navigator.js';
 import { DatePicker } from '../forms/date-picker/index.js';
 import { getLocalDateString } from '../../lib/utils.js';
+import { formatNumber } from '../../lib/number-format.js';
 function buildSendPayload(ctx, message, autoTitle) {
     if (ctx.mode === 'new') {
         return { message, conversationId: undefined, newChat: true, title: autoTitle };
@@ -61,7 +62,7 @@ function bucketForDate(iso, now = new Date()) {
     return { id: `m-${d.getFullYear()}-${d.getMonth()}`, label: monthLabel, sort };
 }
 export function Chat({ mode = 'fullpage', externalMuted, title = 'Chat', sidebarTitle, bubbleLogo, logo, MessagesComponent, fullpagePath, onBeforeEditMessage, initialMessage, initialConversationId, headerActions, onMessagesChange }) {
-    const { data: session } = useSession();
+    const session = useOptionalSessionAdapter()?.data ?? null;
     const router = useRouter();
     const alerts = useGlobalAlert();
     const { t } = useLanguage();
@@ -1019,7 +1020,7 @@ export function Chat({ mode = 'fullpage', externalMuted, title = 'Chat', sidebar
                                 }, { prompt: 0, completion: 0, total: 0 });
                                 if (totals.total === 0)
                                     return null;
-                                return (_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 (_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["Prompt: ", formatNumber(totals.prompt), " \u00B7 Response: ", formatNumber(totals.completion), " \u00B7 Total: ", formatNumber(totals.total), " tokens \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                             })(), _jsxs("div", { className: "absolute right-3 flex items-center gap-0.5", children: [headerActions, _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 ? _jsx(VolumeX, { className: "w-3.5 h-3.5" }) : _jsx(Volume2, { className: "w-3.5 h-3.5" }) }), messages.length > 0 && (_jsxs(_Fragment, { children: [_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: _jsx(Download, { className: "w-3.5 h-3.5" }) }), _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: _jsx(Share2, { className: "w-3.5 h-3.5" }) })] })), fullpagePath && mode === 'modal' && (_jsx("button", { onClick: () => {
                                             const target = currentConversationId
                                                 ? `${fullpagePath}?c=${currentConversationId}`

package/dist/components/chat/index.js

@@ -1,4 +1,3 @@
-'use client';
 // Chat Components - Centralized exports
 //
 // Only the backend-agnostic pieces are exported. `Chat` itself is deliberately left out: it is

package/dist/components/dashboard/FilterBar.d.ts

@@ -50,6 +50,8 @@ export interface FilterBarProps {
     title: string;
     /** Dynamic context label (shown as subtitle) */
     contextLabel?: string;
+    /** One line under the title saying what the page shows. */
+    description?: React.ReactNode;
     /** Secondary toggle (e.g., Job/Value) */
     secondaryToggle?: {
         options: ToggleOption[];
@@ -99,10 +101,12 @@ export interface FilterBarProps {
     onInsightsClick?: () => void;
     /** Fiscal-year start year (e.g. 2026 for FY 2026-2027). Drives fiscal Week/Month/Quarter/Year options. */
     fiscalStartYear?: number;
+    /** Offer "All Time" at the end of the Year list (needs `fiscalStartYear`). */
+    allTime?: boolean;
     /** Additional content */
     children?: React.ReactNode;
     className?: string;
     /** Layout variant: 'default' or 'centered' (title in center) */
     layout?: 'default' | 'centered';
 }
-export declare function FilterBar({ title, contextLabel, secondaryToggle, timeFilter, onTimeFilterChange, timeFilterSelection, onTimeFilterSelectionChange, hideTimeFilter, filters, filterValues, onFilterChange, dateFrom, dateTo, onDateFromChange, onDateToChange, onApply, onReset, reports, onReportSelect, onExport, hideFilterButton, hideDateRange, showApplyButton, forecast, onForecastChange, onShare, showInsights, insightsActive, onInsightsClick, children, className, layout, fiscalStartYear }: FilterBarProps): React.JSX.Element;
+export declare function FilterBar({ title, contextLabel, description, secondaryToggle, timeFilter, onTimeFilterChange, timeFilterSelection, onTimeFilterSelectionChange, hideTimeFilter, filters, filterValues, onFilterChange, dateFrom, dateTo, onDateFromChange, onDateToChange, onApply, onReset, reports, onReportSelect, onExport, hideFilterButton, hideDateRange, showApplyButton, forecast, onForecastChange, onShare, showInsights, insightsActive, onInsightsClick, children, className, layout, fiscalStartYear, allTime, }: FilterBarProps): React.JSX.Element;

package/dist/components/dashboard/FilterBar.js

@@ -214,7 +214,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),
@@ -242,7 +242,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 },
@@ -318,11 +321,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: [_jsx(TrendingUp, { className: "w-4 h-4" }), forecast.enabled && !open && (_jsx("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), open && (_jsxs("div", { className: 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: [_jsxs("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))] shrink-0", children: t('Forecast') }), onTimeFilterChange ? (_jsx(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]" })) : (_jsxs("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: ["\u00B7 ", t(timeFilter)] }))] }), _jsx(Switch, { checked: forecast.enabled, onCheckedChange: (enabled) => onForecastChange({ ...forecast, enabled }) })] }), _jsxs("div", { className: cn('p-3 space-y-3', !forecast.enabled && 'opacity-50 pointer-events-none'), children: [_jsx(Tabs, { tabs: 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 && (_jsx("p", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: t(activeMethod.hint) })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Based On Last') }), _jsx(Stepper, { value: forecast.period, min: limits.min, max: limits.max, onChange: setPeriod }), _jsx("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.period, -1) })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Forecast Ahead') }), _jsx(Stepper, { value: forecast.horizon, min: horizonLimits.min, max: horizonLimits.max, onChange: setHorizon }), _jsx("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.horizon, 1) })] })] })] })] }))] }));
 }
-export 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 }) {
+export 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] = useState(false);
     const popoverRef = useRef(null);
     const buttonRef = useRef(null);
-    const timeOptions = 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 = useRef(null);
+    const timeTabsRef = useRef(null);
+    const [tabsWrapped, setTabsWrapped] = useState(false);
+    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 = 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.
@@ -385,10 +408,10 @@ export function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = '
                                             ...(filter === 'Year' && { years: selectedValues }),
                                         };
                                         onTimeFilterSelectionChange?.(newSelection);
-                                    } }))] }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h1", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title }), contextLabel && (_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: contextLabel }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [!hideFilterButton && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: 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: [_jsx(ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && (_jsx("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && (_jsxs("div", { ref: popoverRef, className: 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: [_jsxs("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), _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: _jsx(X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), _jsxs("div", { className: "p-3 space-y-3", children: [filters.length > 0 && (_jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${filters.length}, minmax(140px, 1fr))` }, children: filters.map((filter) => (_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), _jsx(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 && (_jsx(DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && (_jsx(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange })), showApplyButton && (_jsx("button", { onClick: onApply, className: 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) && (_jsx(OverflowMenu, { reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] })] }) }) }));
+                                    } }))] }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h1", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title }), contextLabel && (_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: contextLabel })), description && _jsx("p", { className: "mt-0.5 text-xs text-[rgb(var(--fg-muted))]", children: description })] }), _jsxs("div", { className: "flex items-center gap-3", children: [!hideFilterButton && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: 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: [_jsx(ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && (_jsx("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && (_jsxs("div", { ref: popoverRef, className: 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: [_jsxs("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), _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: _jsx(X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), _jsxs("div", { className: "p-3 space-y-3", children: [filters.length > 0 && (_jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${filters.length}, minmax(140px, 1fr))` }, children: filters.map((filter) => (_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), _jsx(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 && (_jsx(DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && (_jsx(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange })), showApplyButton && (_jsx("button", { onClick: onApply, className: 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) && (_jsx(OverflowMenu, { reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] })] }) }) }));
     }
     // Default layout: Title centered, controls on right
-    return (_jsxs("header", { className: cn('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', 'px-4 py-3 lg:px-6', className), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-2.5", children: [_jsx("h1", { className: "text-base sm:text-xl font-bold text-[rgb(var(--fg-default))] leading-tight truncate", children: title }), contextLabel && (_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: [_jsx(CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [secondaryToggle && (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden sm:block", children: _jsx(Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" }) }), _jsx("div", { className: "hidden sm:block h-4 w-px bg-[rgb(var(--bd-default))] self-center" })] })), !hideTimeFilter && (_jsx("div", { className: "hidden sm:block", children: _jsx(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 (_jsxs("header", { className: cn('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', 'px-4 py-3 lg:px-6', className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [_jsxs("div", { className: "flex-auto min-w-0 flex items-center gap-2.5", children: [_jsx("h1", { className: "text-base sm:text-xl font-bold text-[rgb(var(--fg-default))] leading-tight truncate", children: title }), contextLabel && (_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: [_jsx(CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] }))] }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-x-3 gap-y-2", children: [secondaryToggle && (_jsxs(_Fragment, { children: [_jsx("div", { ref: toggleRef, className: "hidden sm:block", children: _jsx(Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" }) }), _jsx("div", { className: cn('hidden h-4 w-px bg-[rgb(var(--bd-default))] self-center', !tabsWrapped && 'sm:block') })] })), !hideTimeFilter && (_jsx("div", { ref: timeTabsRef, className: "hidden sm:block", children: _jsx(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 || [],
@@ -407,7 +430,7 @@ export function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = '
                                         onTimeFilterSelectionChange?.(newSelection);
                                     } }) })), _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 && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: 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: [_jsx(ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && (_jsx("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && (_jsxs("div", { ref: popoverRef, className: 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: [_jsxs("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), _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: _jsx(X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), _jsxs("div", { className: "p-3 space-y-3", children: [filters.length > 0 && (_jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${Math.min(filters.length, 3)}, minmax(140px, 1fr))` }, children: filters.map((filter) => (_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), _jsx(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 && (_jsx(DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && (_jsx(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange, bare: true })), (showInsights || reports.length > 0 || onShare || onExport) && (_jsx(OverflowMenu, { showInsights: showInsights, insightsActive: insightsActive, onInsightsClick: onInsightsClick, reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] }), showApplyButton && (_jsx("button", { onClick: onApply, className: 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 && (_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: [_jsx(CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] })), (!hideTimeFilter || secondaryToggle) && (_jsxs("div", { className: "sm:hidden mt-2 flex items-center gap-2 overflow-x-auto", children: [secondaryToggle && (_jsx(Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && (_jsx(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: [_jsx(ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && (_jsx("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && (_jsxs("div", { ref: popoverRef, className: 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: [_jsxs("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), _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: _jsx(X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), _jsxs("div", { className: "p-3 space-y-3", children: [filters.length > 0 && (_jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${Math.min(filters.length, 3)}, minmax(140px, 1fr))` }, children: filters.map((filter) => (_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), _jsx(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 && (_jsx(DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && (_jsx(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange, bare: true })), (showInsights || reports.length > 0 || onShare || onExport) && (_jsx(OverflowMenu, { showInsights: showInsights, insightsActive: insightsActive, onInsightsClick: onInsightsClick, reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] }), showApplyButton && (_jsx("button", { onClick: onApply, className: 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 && (_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: [_jsx(CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] })), (!hideTimeFilter || secondaryToggle) && (_jsxs("div", { className: "sm:hidden mt-2 flex flex-col items-start gap-2", children: [secondaryToggle && (_jsx(Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && (_jsx(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 || [],
@@ -424,5 +447,5 @@ export function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = '
                                 ...(filter === 'Year' && { years: selectedValues }),
                             };
                             onTimeFilterSelectionChange?.(newSelection);
-                        } }))] }))] }));
+                        } }))] })), description && _jsx("p", { className: "mt-1 text-sm text-[rgb(var(--fg-muted))]", children: description })] }));
 }

package/dist/components/dashboard/charts/Area.d.ts

@@ -20,9 +20,13 @@ export interface AreaChartProps {
     showLegend?: boolean;
     showGrid?: boolean;
     smooth?: boolean;
+    /** How a value reads in the tooltip. Default: the full number, Indian grouping (20,00,000). */
+    valueFormatter?: (value: number) => string;
+    /** How a value reads on the value axis. Default: compact (12,500 · 20 L · 1.4 Cr). */
+    axisFormatter?: (value: number) => string;
     className?: string;
 }
 /**
  * AreaChart - ECharts Area Chart component
  */
-export declare function AreaChart({ data, xKey, series, height, showLegend, showGrid, smooth, className }: AreaChartProps): import("react").JSX.Element;
+export declare function AreaChart({ data, xKey, series, height, showLegend, showGrid, smooth, valueFormatter, axisFormatter, className }: AreaChartProps): import("react").JSX.Element;

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatCompactNumber, formatNumber } from '../../../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) {
@@ -31,10 +32,11 @@ function withAlpha(color, alpha) {
 /**
  * AreaChart - ECharts Area Chart component
  */
-export function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, className }) {
+export 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 ?? formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.95)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -70,13 +72,13 @@ export function AreaChart({ data, xKey, series, height = 300, showLegend = true,
         },
         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 ?? formatCompactNumber)(v) }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) }, splitLine: { show: false } },
             ]
             : {
                 type: 'value',
                 axisLine: { show: false },
-                axisLabel: { color: '#6c757d', fontSize: 11 },
+                axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) },
                 splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } }
             },
         series: series.map((s, index) => {

package/dist/components/dashboard/charts/Bar.d.ts

@@ -19,9 +19,13 @@ export interface BarChartProps {
      * Renders a KPI-vs-target bullet (track + actual fill + target marker + achievement %).
      */
     targetKey?: string;
+    /** How a value reads in the tooltip. Default: the full number, Indian grouping (20,00,000). */
+    valueFormatter?: (value: number) => string;
+    /** How a value reads on the value axis. Default: compact (12,500 · 20 L · 1.4 Cr). */
+    axisFormatter?: (value: number) => string;
     className?: string;
 }
 /**
  * BarChart - ECharts Bar Chart component
  */
-export declare function BarChart({ data, xKey, series, height, showLegend, showGrid, horizontal, targetKey, className }: BarChartProps): import("react").JSX.Element;
+export declare function BarChart({ data, xKey, series, height, showLegend, showGrid, horizontal, targetKey, valueFormatter, axisFormatter, className }: BarChartProps): import("react").JSX.Element;

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

@@ -2,10 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatCompactNumber, formatNumber } from '../../../lib/number-format.js';
 /**
  * BarChart - ECharts Bar Chart component
  */
-export function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, className }) {
+export 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;
@@ -25,13 +26,14 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
                     : met
                         ? 'linear-gradient(90deg, #34d399 0%, #10b981 100%)'
                         : 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)';
-                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), _jsxs("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), _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()}` })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [_jsx("span", { children: actual.toLocaleString() }), _jsx("span", { children: `Target ${target.toLocaleString()}` })] })] }, `${name}-${idx}`));
+                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), _jsxs("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), _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: ${formatNumber(target)}` })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [_jsx("span", { children: formatNumber(actual) }), _jsx("span", { children: `Target ${formatNumber(target)}` })] })] }, `${name}-${idx}`));
             }) }));
     }
     const categoryData = data.map(item => item[xKey]);
     const option = {
         tooltip: {
             trigger: 'item',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.98)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -64,7 +66,7 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
             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 ?? formatCompactNumber)(v) } : { color: '#6c757d', fontSize: 11 },
             axisTick: { show: false },
             splitLine: horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
@@ -74,7 +76,7 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
             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 ?? formatCompactNumber)(v) },
             splitLine: !horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
             } : { show: false }

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

@@ -6,6 +6,7 @@ import * as echarts from 'echarts/core';
 import { cn } from '../../../lib/utils.js';
 import { INDIA_GEOJSON } from './india-map.js';
 import { getChartTheme } from './theme.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * FlowMap - Geographic flow/route visualization
  *
@@ -161,7 +162,7 @@ export function FlowMap({ markers = [], lines = [], height = 400, markerColor =
                 }
                 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: ${formatNumber(value)}` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

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

@@ -2,6 +2,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../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.
@@ -30,6 +31,6 @@ export 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: [_jsx("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), _jsx("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: item.value.toLocaleString() })] }) })] }, item.name));
+                            }, title: `${item.name}: ${formatNumber(item.value)} (${pct.toFixed(1)}%)`, children: [_jsx("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), _jsx("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: formatNumber(item.value) })] }) })] }, item.name));
         }) }));
 }