indas-ui 0.1.3 → 0.1.5

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

@@ -5,6 +5,7 @@ exports.KpiQuickStats = KpiQuickStats;
 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");
 /**
  * KpiQuickStats - KPI card with grid of icon stats
  *
@@ -36,6 +37,6 @@ function KpiQuickStats({ title, stats, columns = 2, loading, className }) {
     };
     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.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))] mb-3", children: title }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('grid gap-x-3 gap-y-2', gridClasses[columns]), children: stats.map((stat, index) => {
                     const Icon = stat.icon;
-                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Icon, { className: (0, utils_1.cn)('w-4 h-4', getIconColorClass(stat.iconColor)) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Icon, { className: (0, utils_1.cn)('w-4 h-4', getIconColorClass(stat.iconColor)) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? (0, number_format_1.formatNumber)(stat.value) : stat.value }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
                 }) })] }));
 }

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

@@ -5,6 +5,7 @@ exports.KpiRating = KpiRating;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * KpiRating - KPI card with star rating display
  *
@@ -30,9 +31,9 @@ function KpiRating({ title, score, maxScore = 5, reviewCount, status, statusType
             return 'bg-[rgb(var(--color-warning))]';
         return 'bg-[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 relative group', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-5 h-5 rounded-full bg-[rgb(var(--bg-subtle))] flex items-center justify-center cursor-help hover:bg-[rgb(var(--color-primary))]/10 transition-colors peer", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 top-7 w-72 p-3 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all z-10", children: [tooltip.formula && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: item.count.toLocaleString() }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-0.5", children: Array.from({ length: maxScore }, (_, i) => {
+    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 relative group', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-5 h-5 rounded-full bg-[rgb(var(--bg-subtle))] flex items-center justify-center cursor-help hover:bg-[rgb(var(--color-primary))]/10 transition-colors peer", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 top-7 w-72 p-3 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all z-10", children: [tooltip.formula && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: (0, number_format_1.formatNumber)(item.count) }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-0.5", children: Array.from({ length: maxScore }, (_, i) => {
                                     const starIndex = i + 1;
                                     const isFilled = starIndex <= filledStars || (starIndex === filledStars + 1 && hasPartialStar);
                                     return ((0, jsx_runtime_1.jsx)("svg", { className: (0, utils_1.cn)('w-5 h-5 transition-transform hover:scale-110 cursor-pointer', isFilled ? 'text-yellow-400' : 'text-yellow-400/30'), fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, i));
-                                }) }), reviewCount !== undefined && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [reviewCount.toLocaleString(), " reviews"] }))] }), status && ((0, jsx_runtime_1.jsx)("div", { className: "ml-auto text-right", children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [change > 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)('text-xs', change > 0 ? 'text-[rgb(var(--color-success))]' : change < 0 ? 'text-[rgb(var(--color-error))]' : 'text-[rgb(var(--fg-muted))]'), children: [change > 0 ? '+' : '', change, " ", changeLabel] })] })), periodLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
+                                }) }), reviewCount !== undefined && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [(0, number_format_1.formatNumber)(reviewCount), " reviews"] }))] }), status && ((0, jsx_runtime_1.jsx)("div", { className: "ml-auto text-right", children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [change > 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)('text-xs', change > 0 ? 'text-[rgb(var(--color-success))]' : change < 0 ? 'text-[rgb(var(--color-error))]' : 'text-[rgb(var(--fg-muted))]'), children: [change > 0 ? '+' : '', change, " ", changeLabel] })] })), periodLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
 }

package/dist/cjs/components/dashboard/time-range.js

@@ -43,44 +43,77 @@ const fiscalWeekCount = (fyStart) => {
     return wk;
 };
 exports.fiscalWeekCount = fiscalWeekCount;
-// "this" anchors to the FY's first period (W1 / Apr / Q1), per fiscal reporting.
-const rangeFromSelection = (sel, fyStart) => {
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+// Monday of the week holding `d` (weeks run Monday to Sunday, as the fiscal weeks do).
+const mondayOf = (d) => addDays(d, -((d.getDay() + 6) % 7));
+/**
+ * The dates a selection covers.
+ *
+ * Quick picks (This / Last …) count from `today`: "This week" is the week holding today, "Last
+ * month" the calendar month before this one, "This quarter" the fiscal quarter holding today.
+ * They used to anchor to the financial year's first period, so "This week" meant Week 1 in April.
+ * A "This …" range runs to today, since nothing after today has happened yet.
+ *
+ * A numbered pick (W27, month "9", Q3, a year "2025") is that period of the financial year
+ * starting `fyStart`. Year "all" is all time, from the earliest date a book could hold to today.
+ */
+const rangeFromSelection = (sel, fyStart, today = new Date()) => {
+    const t = startOfDay(today);
     const fyOpen = new Date(fyStart, 3, 1);
     const fyClose = new Date(fyStart + 1, 2, 31);
     const yearOf = (mo) => (mo >= 3 ? fyStart : fyStart + 1);
     const monthRange = (mo) => ({ from: new Date(yearOf(mo), mo, 1), to: new Date(yearOf(mo), mo + 1, 0) });
     const type = sel?.type || 'Month';
     if (type === 'Day') {
-        const now = new Date();
-        const y = now.getFullYear(), m = now.getMonth(), d = now.getDate();
         const pick = sel?.days?.[0] || 'today';
-        if (pick === 'yesterday') {
-            const dt = new Date(y, m, d - 1);
-            return { from: dt, to: dt };
-        }
-        if (pick === 'last7')
-            return { from: new Date(y, m, d - 6), to: new Date(y, m, d) };
-        if (pick === 'last14')
-            return { from: new Date(y, m, d - 13), to: new Date(y, m, d) };
-        if (pick === 'last30')
-            return { from: new Date(y, m, d - 29), to: new Date(y, m, d) };
-        return { from: new Date(y, m, d), to: new Date(y, m, d) };
+        if (pick === 'yesterday')
+            return { from: addDays(t, -1), to: addDays(t, -1) };
+        const span = { last7: 7, last14: 14, last30: 30 }[pick];
+        return span ? { from: addDays(t, -(span - 1)), to: t } : { from: t, to: t };
     }
     if (type === 'Week') {
-        const pick = sel?.weeks?.[0] || 'W1';
+        const pick = sel?.weeks?.[0] || 'this';
+        const monday = mondayOf(t);
+        if (pick === 'this')
+            return { from: monday, to: t };
+        if (pick === 'last')
+            return { from: addDays(monday, -7), to: addDays(monday, -1) };
+        // "Last 2 weeks" is this week and the one before it, to today.
+        const weeks = { last2: 2, last4: 4 }[pick];
+        if (weeks)
+            return { from: addDays(monday, -7 * (weeks - 1)), to: t };
         const wk = /^W\d+$/i.test(pick) ? parseInt(pick.slice(1)) : 1;
         return (0, exports.fiscalWeekRange)(fyStart, wk) || { from: fyOpen, to: fyClose };
     }
     if (type === 'Quarter') {
-        const pick = sel?.quarters?.[0];
-        const qNum = pick && /^q[1-4]$/i.test(pick) ? parseInt(pick.slice(1)) - 1 : 0;
+        const pick = sel?.quarters?.[0] || 'this';
+        // The fiscal quarter holding today: Apr–Jun is Q1.
+        const qStart = new Date(t.getFullYear(), t.getMonth() - (((t.getMonth() - 3 + 12) % 12) % 3), 1);
+        if (pick === 'this')
+            return { from: qStart, to: t };
+        if (pick === 'last')
+            return { from: new Date(qStart.getFullYear(), qStart.getMonth() - 3, 1), to: addDays(qStart, -1) };
+        const qNum = /^q[1-4]$/i.test(pick) ? parseInt(pick.slice(1)) - 1 : 0;
         const startMonth = (3 + qNum * 3) % 12;
         const sy = yearOf(startMonth);
         return { from: new Date(sy, startMonth, 1), to: new Date(sy, startMonth + 3, 0) };
     }
-    if (type === 'Year')
-        return { from: fyOpen, to: fyClose };
-    const picks = (sel?.months || []).filter(s => /^\d{1,2}$/.test(s)).map(s => parseInt(s));
+    if (type === 'Year') {
+        const pick = sel?.years?.[0] || 'this';
+        if (pick === 'all')
+            return { from: new Date(1970, 0, 1), to: t };
+        if (pick === 'last')
+            return { from: new Date(fyStart - 1, 3, 1), to: new Date(fyStart, 2, 31) };
+        const fy = /^\d{4}$/.test(pick) ? parseInt(pick) : fyStart;
+        return { from: new Date(fy, 3, 1), to: new Date(fy + 1, 2, 31) };
+    }
+    const months = sel?.months || [];
+    if (months.includes('this'))
+        return { from: new Date(t.getFullYear(), t.getMonth(), 1), to: t };
+    if (months.includes('last'))
+        return { from: new Date(t.getFullYear(), t.getMonth() - 1, 1), to: new Date(t.getFullYear(), t.getMonth(), 0) };
+    const picks = months.filter(s => /^\d{1,2}$/.test(s)).map(s => parseInt(s));
     if (picks.length > 0) {
         const ranges = picks.map(monthRange);
         return {
@@ -88,7 +121,7 @@ const rangeFromSelection = (sel, fyStart) => {
             to: ranges.reduce((a, b) => (b.to > a.to ? b : a)).to,
         };
     }
-    return monthRange(3);
+    return { from: new Date(t.getFullYear(), t.getMonth(), 1), to: t };
 };
 exports.rangeFromSelection = rangeFromSelection;
 // Header subtitle for the selected period. Week/Day show their day span in brackets;
@@ -106,17 +139,28 @@ const buildContextLabel = (sel, fyStart, dateFrom, dateTo, t) => {
         return `${pick} (${dayRange})`;
     }
     if (!dateFrom && !dateTo && sel?.type === 'Week') {
-        const w = sel.weeks?.[0];
-        const wk = w && /^W\d+$/i.test(w) ? w.slice(1) : '1';
+        const w = sel.weeks?.[0] || 'this';
+        const quick = { this: 'This Week', last: 'Last Week', last2: 'Last 2 Weeks', last4: 'Last 4 Weeks' }[w];
+        if (quick)
+            return `${t(quick)} (${dayRange})`;
+        const wk = /^W\d+$/i.test(w) ? w.slice(1) : '1';
         return `${t('Week')} ${wk} (${dayRange})`;
     }
     if (!dateFrom && !dateTo && sel?.type === 'Quarter') {
-        const q = sel.quarters?.[0];
-        const label = q && /^q[1-4]$/i.test(q) ? `Q${q.slice(1)}` : 'Q1';
+        const q = sel.quarters?.[0] || 'this';
+        const label = q === 'this' ? t('This Quarter') : q === 'last' ? t('Last Quarter') : /^q[1-4]$/i.test(q) ? `Q${q.slice(1)}` : 'Q1';
         return `${label} (${fmtMon(from)} – ${fmtMon(to)})`;
     }
     if (!dateFrom && !dateTo && sel?.type === 'Year') {
-        return `${t('FY')} ${fyStart}-${fyStart + 1}`;
+        const y = sel.years?.[0] || 'this';
+        if (y === 'all')
+            return t('All Time');
+        const fy = y === 'last' ? fyStart - 1 : /^\d{4}$/.test(y) ? parseInt(y) : fyStart;
+        return `${t('FY')} ${fy}-${fy + 1}`;
+    }
+    const m0 = sel?.months?.[0];
+    if (!dateFrom && !dateTo && sel?.type === 'Month' && (m0 === 'this' || m0 === 'last')) {
+        return `${t(m0 === 'this' ? 'This Month' : 'Last Month')} (${dayRange})`;
     }
     const sameMonth = from.getFullYear() === to.getFullYear() && from.getMonth() === to.getMonth();
     if (sameMonth)

package/dist/cjs/components/datagrid/columns/ColumnContextMenu.js

@@ -11,6 +11,7 @@ const ui_2 = require("../../ui/index.js");
 const ui_3 = require("../../ui/index.js");
 const ui_4 = require("../../ui/index.js");
 const ui_5 = require("../../ui/index.js");
+const number_format_1 = require("../../../lib/number-format.js");
 function ColumnContextMenu({ column, table, data, isVisible, position, onClose, onApplyFilter, }) {
     const [activeSubmenu, setActiveSubmenu] = (0, react_1.useState)(null);
     const [quickFilterValue, setQuickFilterValue] = (0, react_1.useState)('');
@@ -319,7 +320,7 @@ function ColumnContextMenu({ column, table, data, isVisible, position, onClose,
                                             }, className: "w-full flex items-center gap-2 px-2 py-1 text-left text-xs rounded hover:bg-[rgb(var(--bg-subtle))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))] flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate flex-1", children: col.label })] }, col.id))) })] }) }, item.id));
                     }
                     if (item.id === 'column-stats' && columnStats) {
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "p-2 space-y-1.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Column Statistics" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Total:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.totalCount.toLocaleString() }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Unique:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.uniqueCount.toLocaleString() }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Null:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.nullCount.toLocaleString() }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Type:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-right", children: (0, jsx_runtime_1.jsx)(ui_5.Badge, { variant: "outline", className: "text-xs h-4", children: columnStats.dataType }) }), columnStats.dataType === 'number' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Min:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.min }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Max:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.max }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Avg:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.avg?.toFixed(2) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Sum:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.sum?.toLocaleString() })] }))] })] }, item.id));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "p-2 space-y-1.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Column Statistics" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Total:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: (0, number_format_1.formatNumber)(columnStats.totalCount) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Unique:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: (0, number_format_1.formatNumber)(columnStats.uniqueCount) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Null:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: (0, number_format_1.formatNumber)(columnStats.nullCount) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Type:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-right", children: (0, jsx_runtime_1.jsx)(ui_5.Badge, { variant: "outline", className: "text-xs h-4", children: columnStats.dataType }) }), columnStats.dataType === 'number' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Min:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.min }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Max:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.max }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Avg:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: columnStats.avg?.toFixed(2) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))]", children: "Sum:" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-right", children: (0, number_format_1.formatNumber)(columnStats.sum) })] }))] })] }, item.id));
                     }
                 }
                 const Icon = item.icon;

package/dist/cjs/components/datagrid/controls/menu/view/CardView.js

@@ -10,6 +10,7 @@ const ui_1 = require("../../../../ui/index.js");
 const SelectionCell_1 = require("../../../cells/SelectionCell.js");
 const skeleton_1 = require("../../../../ui/feedback/skeleton.js");
 const LanguageContext_1 = require("../../../../../contexts/LanguageContext.js");
+const number_format_1 = require("../../../../../lib/number-format.js");
 const sizeConfig = {
     compact: {
         grid: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
@@ -131,7 +132,7 @@ function CardView({ data, columns, onRowClick, selectedRows, onRowSelect, isLoad
             return value ? ((0, jsx_runtime_1.jsx)(ui_1.Badge, { variant: "default", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))] border-0 font-medium", children: t('Yes') })) : ((0, jsx_runtime_1.jsx)(ui_1.Badge, { variant: "secondary", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] border-0 font-medium", children: t('No') }));
         }
         if (typeof value === 'number')
-            return value.toLocaleString();
+            return (0, number_format_1.formatNumber)(value);
         return value?.toString() || '—';
     }, [t]);
     const getFieldLabel = (0, react_1.useCallback)((column) => {

package/dist/cjs/components/datagrid/controls/menu/view/ChartView.js

@@ -48,6 +48,7 @@ const ui_1 = require("../../../../ui/index.js");
 const ui_2 = require("../../../../ui/index.js");
 const components_1 = require("../../../../index.js");
 const ui_3 = require("../../../../ui/index.js");
+const number_format_1 = require("../../../../../lib/number-format.js");
 const CHART_COLORS = [
     '#3b82f6', // Blue
     '#ef4444', // Red
@@ -381,7 +382,7 @@ function DataVisualization({ data, columns, title = "Data Insights" }) {
     if (data.length === 0) {
         return ((0, jsx_runtime_1.jsx)(ui_1.Card, { className: "p-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center text-gray-500", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-2", children: "No Data Available" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: "Add some data to view visualizations" })] }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-bold tracking-tight", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LineChart, { className: "h-4 w-4 mr-2" }), "Line"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PieChart, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600", children: summaryStats.sum.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-orange-600", children: summaryStats.min.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-600", children: summaryStats.max.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), (0, jsx_runtime_1.jsxs)(ui_1.Card, { children: [(0, jsx_runtime_1.jsx)(ui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(ui_1.CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), (0, jsx_runtime_1.jsx)(ui_1.CardContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: categoricalColumns.map((col) => ({
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-bold tracking-tight", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LineChart, { className: "h-4 w-4 mr-2" }), "Line"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PieChart, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600", children: (0, number_format_1.formatNumber)(summaryStats.sum) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-orange-600", children: (0, number_format_1.formatNumber)(summaryStats.min) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-600", children: (0, number_format_1.formatNumber)(summaryStats.max) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), (0, jsx_runtime_1.jsxs)(ui_1.Card, { children: [(0, jsx_runtime_1.jsx)(ui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(ui_1.CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), (0, jsx_runtime_1.jsx)(ui_1.CardContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: categoricalColumns.map((col) => ({
                                                 value: col.key,
                                                 label: col.label,
                                             })), value: xAxisColumn, onValueChange: (value) => setXAxisColumn(typeof value === 'string' ? value : value[0] || ''), placeholder: "Select column" })] }), selectedChart !== 'pie' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium mb-2 block", children: "Y-Axis (Values)" }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: numericColumns.map((col) => ({

package/dist/cjs/components/datagrid/utils/grid-helpers.js

@@ -1,8 +1,5 @@
 'use client';
 "use strict";
-/**
- * Grid utility functions and helpers
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculatePaginationInfo = calculatePaginationInfo;
 exports.generatePageNumbers = generatePageNumbers;
@@ -10,6 +7,10 @@ exports.debounce = debounce;
 exports.getRowId = getRowId;
 exports.formatNumber = formatNumber;
 exports.matchesSearch = matchesSearch;
+const number_format_1 = require("../../../lib/number-format.js");
+/**
+ * Grid utility functions and helpers
+ */
 /**
  * Calculate pagination info
  */
@@ -83,10 +84,10 @@ function getRowId(row, index, getRowIdFn) {
     return String(index);
 }
 /**
- * Format large numbers with commas
+ * Format large numbers with grouping, in the library's number locale (Indian by default)
  */
 function formatNumber(num) {
-    return num.toLocaleString();
+    return (0, number_format_1.formatNumber)(num);
 }
 /**
  * Check if value matches search term

package/dist/cjs/components/layout/footer.js

@@ -6,6 +6,7 @@ exports.CompactFooter = CompactFooter;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../lib/utils.js");
 const useTranslation_1 = require("../../hooks/useTranslation.js");
+const number_format_1 = require("../../lib/number-format.js");
 function Footer({ kpis, actions, iconButtons, leftContent, className, sticky = false, compact = false, padding, variant = 'page', gradient = false }) {
     if (!kpis && !actions && !leftContent && !iconButtons) {
         return null;
@@ -45,7 +46,7 @@ function Footer({ kpis, actions, iconButtons, leftContent, className, sticky = f
                     padding === 'normal' ? "py-3 sm:py-4" :
                         compact ? "py-1" :
                             isModal ? "py-1.5 sm:py-2" : "py-3 sm:py-4"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [leftContent, kpis && kpis.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-3 sm:gap-6 md:gap-8", children: kpis.map((kpi) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm", kpi.onClick && "cursor-pointer hover:text-[rgb(var(--color-primary-hover))] transition-colors"), onClick: kpi.onClick, children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-[rgb(var(--fg-muted))] whitespace-nowrap", children: [kpi.label, ":"] }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-[rgb(var(--fg-default))]", children: typeof kpi.value === 'number'
-                                            ? kpi.value.toLocaleString()
+                                            ? (0, number_format_1.formatNumber)(kpi.value)
                                             : kpi.value }), kpi.trend && ((0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)("text-xs font-medium", kpi.trend.direction === 'up'
                                             ? "text-[rgb(var(--color-success))]"
                                             : "text-[rgb(var(--color-error))]"), children: [kpi.trend.direction === 'up' ? '↑' : '↓', Math.abs(kpi.trend.value), "%"] }))] }, kpi.id))) }))] }), iconButtons && iconButtons.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2", children: iconButtons.map((button) => {

package/dist/cjs/components/layout/side-panel.js

@@ -110,7 +110,10 @@ function SidePanel({ title, icon: Icon, categories, activeItemId, onItemSelect,
                                                                     return (0, jsx_runtime_1.jsx)(ItemIcon, { className: "w-4 h-4 shrink-0 opacity-50" });
                                                                 })(), (0, jsx_runtime_1.jsx)("span", { className: "truncate flex-1", children: item.label }), item.badge !== undefined && item.badge !== 0 && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("text-xs px-1.5 py-0.5 rounded-full shrink-0 tabular-nums", activeItemId === item.id
                                                                         ? "bg-[rgb(var(--color-primary))] text-white"
-                                                                        : "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]"), children: item.badge }))] }), itemContextMenu && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => handleMenuToggle(e, item.id), className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-6 h-6 rounded-md text-[rgb(var(--fg-muted))]/50 flex items-center justify-center hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-all opacity-0 group-hover:opacity-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "w-3.5 h-3.5" }) }))] }, item.id))) }))] }, category.id))))] })) }), footer && !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("shrink-0 border-t border-[rgb(var(--bd-default))] transition-opacity duration-200", isAnimating ? "opacity-0" : "opacity-100"), children: footer }))] }), menuOpen !== null && itemContextMenu && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "fixed bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg min-w-[170px] shadow-lg overflow-hidden z-[9999]", style: {
+                                                                        : "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]"), children: item.badge }))] }), itemContextMenu && (
+                                                        // Named for screen readers, and shown on keyboard focus as well as hover:
+                                                        // it was an unlabelled button nobody tabbing could see.
+                                                        (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => handleMenuToggle(e, item.id), "aria-label": `More actions for ${item.label}`, "aria-haspopup": "menu", "aria-expanded": menuOpen === item.id, className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-6 h-6 rounded-md text-[rgb(var(--fg-muted))]/50 flex items-center justify-center hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-all opacity-0 group-hover:opacity-100 focus-visible:opacity-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "w-3.5 h-3.5" }) }))] }, item.id))) }))] }, category.id))))] })) }), footer && !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("shrink-0 border-t border-[rgb(var(--bd-default))] transition-opacity duration-200", isAnimating ? "opacity-0" : "opacity-100"), children: footer }))] }), menuOpen !== null && itemContextMenu && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "fixed bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg min-w-[170px] shadow-lg overflow-hidden z-[9999]", style: {
                         left: `${menuPosition.left}px`,
                         top: `${menuPosition.top}px`,
                         transform: 'translateY(-50%)'

package/dist/cjs/components/layout/sidebar.js

@@ -52,6 +52,7 @@ const utils_2 = require("../../lib/utils.js");
 const react_dom_1 = require("react-dom");
 const SidebarContextMenu_1 = require("./SidebarContextMenu.js");
 const SidebarPreferencesContext_1 = require("../../contexts/SidebarPreferencesContext.js");
+const SessionAdapterContext_1 = require("../../contexts/SessionAdapterContext.js");
 // Route mapping imported from shared utility: getModuleRoutePath
 // Routes that support quick-create via sidebar "+" button.
 // When clicked, navigates to {route}?create=true — the page opens its create modal.
@@ -162,6 +163,14 @@ function DynamicSidebar({ isCollapsed = false, onMenuItemClick, onToggleSidebar,
     const [expandedSubModules, setExpandedSubModules] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(null);
+    // The menu API needs the signed-in session (company credentials). Read from the session adapter,
+    // not next-auth, so the library does not require next-auth; held in a ref so a fresh session
+    // object does not refetch the menu, only the session arriving or leaving does.
+    const sessionAdapter = (0, SessionAdapterContext_1.useOptionalSessionAdapter)();
+    const sessionRef = React.useRef(sessionAdapter?.data ?? null);
+    sessionRef.current = sessionAdapter?.data ?? null;
+    const hasSession = Boolean(sessionAdapter?.data);
+    const sessionStatus = sessionAdapter?.status ?? 'unauthenticated';
     const [needsScroll, setNeedsScroll] = React.useState(false);
     const navRef = React.useRef(null);
     const [hoveredGroup, setHoveredGroup] = React.useState(null);
@@ -203,6 +212,12 @@ function DynamicSidebar({ isCollapsed = false, onMenuItemClick, onToggleSidebar,
         if (!companyId || !userId) {
             return;
         }
+        // No session yet: wait for it (this runs again when it arrives); none at all: no menu.
+        if (!hasSession) {
+            if (sessionStatus !== 'loading')
+                setLoading(false);
+            return;
+        }
         let isCancelled = false;
         const fetchNavigation = async () => {
             // Check cache first - include session start time to invalidate cache across logins
@@ -228,7 +243,7 @@ function DynamicSidebar({ isCollapsed = false, onMenuItemClick, onToggleSidebar,
             try {
                 setLoading(true);
                 setError(null);
-                const navigation = await (0, api_1.getDynamicNavigation)(companyId, userId);
+                const navigation = await (0, api_1.getDynamicNavigation)(companyId, userId, sessionRef.current);
                 if (!isCancelled) {
                     setGroupedModules(navigation);
                     // Cache the result
@@ -256,7 +271,7 @@ function DynamicSidebar({ isCollapsed = false, onMenuItemClick, onToggleSidebar,
                 clearTimeout(hoverTimeoutRef.current);
             }
         };
-    }, [companyId, userId]);
+    }, [companyId, userId, hasSession, sessionStatus]);
     // Auto-open parent items based on current path (optimized)
     React.useEffect(() => {
         if (groupedModules.length === 0)

package/dist/cjs/components/messaging/messaging-panel-content.js

@@ -8,14 +8,14 @@ const navigation_1 = require("next/navigation");
 const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../lib/utils.js");
 const LanguageContext_1 = require("../../contexts/LanguageContext.js");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("../../contexts/SessionAdapterContext.js");
 const MessagingContext_1 = require("../../contexts/MessagingContext.js");
 const messaging_1 = require("../../lib/api/activity/messaging/messaging.js");
 const conversation_list_1 = require("./conversation-list.js");
 const ui_1 = require("../ui/index.js");
 function MessagingPanelContent({ onClose }) {
     const { t } = (0, LanguageContext_1.useLanguage)();
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     const { state, actions } = (0, MessagingContext_1.useMessaging)();
     const router = (0, navigation_1.useRouter)();
     const currentUserId = String(session?.user?.UserID || session?.user?.userID || '');

package/dist/cjs/components/ui/display/stats-card.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../../lib/utils.js");
 const card_1 = require("./card.js");
+const number_format_1 = require("../../../lib/number-format.js");
 const iconVariants = {
     default: "bg-primary text-white",
     accent: "bg-accent text-white",
@@ -16,7 +17,7 @@ const iconVariants = {
 function StatsCard({ title, value, icon: Icon, trend, description, className, variant = 'default' }) {
     const TrendIcon = trend?.direction === 'up' ? lucide_react_1.TrendingUp : lucide_react_1.TrendingDown;
     const trendColor = trend?.direction === 'up' ? 'text-success' : 'text-error';
-    return ((0, jsx_runtime_1.jsx)(card_1.Card, { className: (0, utils_1.cn)("p-6 min-h-[140px] w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [Icon && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: (0, jsx_runtime_1.jsx)(Icon, { className: "h-6 w-6" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? value.toLocaleString() : value }), trend && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center text-sm font-semibold", trendColor), children: [(0, jsx_runtime_1.jsx)(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, { className: (0, utils_1.cn)("p-6 min-h-[140px] w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [Icon && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: (0, jsx_runtime_1.jsx)(Icon, { className: "h-6 w-6" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? (0, number_format_1.formatNumber)(value) : value }), trend && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center text-sm font-semibold", trendColor), children: [(0, jsx_runtime_1.jsx)(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
 }
 function StatsGrid({ children, columns = 4, className }) {
     const gridCols = {

package/dist/cjs/components/ui/navigation/tabs.js

@@ -80,7 +80,10 @@ function Tabs({ tabs, activeTab, onTabChange, fullWidth = false, className = '',
                                 ? 'bg-[rgb(var(--color-primary))] text-white border-[rgb(var(--color-primary))]'
                                 : 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-muted))] border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]'), children: q.label }, q.value));
                     }) })) : undefined;
-                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: tab.dropdownOptions, value: selected, onValueChange: (sel) => {
+                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: tab.dropdownOptions, 
+                    // Periods are listed in time order (Apr, May, Jun… / Week 1, 2, 3…); sorted by label,
+                    // the months came out Apr, Aug, Dec, Feb.
+                    preserveOrder: true, value: selected, onValueChange: (sel) => {
                         const arr = Array.isArray(sel) ? sel.map(String) : [String(sel)];
                         // Ticking a named option clears any quick preset (This/Last) — they're exclusive.
                         const quickVals = (tab.quickOptions || []).map(q => q.value);

package/dist/cjs/contexts/EmailContext.js

@@ -8,7 +8,7 @@ exports.useEmailActions = useEmailActions;
 exports.useEmailAPI = useEmailAPI;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("./SessionAdapterContext.js");
 const email_1 = require("../lib/api/activity/email/index.js");
 const FOLDER_CACHE_MAX_AGE = 5 * 60 * 1000; // 5 minutes
 // Initial State
@@ -152,11 +152,12 @@ function emailReducer(state, action) {
 const EmailContext = (0, react_1.createContext)(undefined);
 // Email Provider Component
 function EmailProvider({ children }) {
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     const [state, dispatch] = (0, react_1.useReducer)(emailReducer, initialState);
     // Memoize on stable identity — useSession() returns a new object each render, so an
     // unmemoized api would churn every useCallback([api]) and trigger repeated fetches.
     const sessionIdentity = `${session?.user?.CompanyID ?? ''}:${session?.user?.UserID ?? ''}`;
+    // The adapter carries the next-auth session as AuthSessionProvider received it, so it has the shape the email API reads.
     const api = (0, react_1.useMemo)(() => (0, email_1.createEmailAPI)(session), [sessionIdentity]); // eslint-disable-line react-hooks/exhaustive-deps
     // Initialize email system when session is available
     // NOTE: Initialization is now manual - call actions.fetchEmails() when needed

package/dist/cjs/contexts/MessagingContext.js

@@ -6,7 +6,7 @@ exports.useMessaging = useMessaging;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const signalr_1 = require("@microsoft/signalr");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("./SessionAdapterContext.js");
 const messaging_1 = require("../lib/api/activity/messaging/messaging.js");
 const messaging_2 = require("../lib/api/activity/messaging/messaging.js");
 const config_1 = require("../lib/api/core/config.js");
@@ -196,7 +196,7 @@ function messagingReducer(state, action) {
 const MessagingContext = (0, react_1.createContext)(undefined);
 // ─── Provider ───────────────────────────────────────────────────────────────
 function MessagingProvider({ children }) {
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     const [state, dispatch] = (0, react_1.useReducer)(messagingReducer, initialState);
     const stateRef = (0, react_1.useRef)(state);
     stateRef.current = state;

package/dist/cjs/contexts/NavigationContext.js

@@ -42,6 +42,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const api_1 = require("../lib/api/index.js");
 const utils_1 = require("../lib/utils.js");
+const SessionAdapterContext_1 = require("./SessionAdapterContext.js");
 /**
  * Filter grouped modules to only those with MobileSupported = 1/true.
  * Returns grouped structure with empty groups removed.
@@ -59,11 +60,25 @@ function NavigationProvider({ children, companyId, userId }) {
     const [groupedModules, setGroupedModules] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(null);
+    // The menu API needs the signed-in session (company credentials). Read from the session adapter,
+    // not next-auth, so the library does not require next-auth; held in a ref so a fresh session
+    // object does not refetch the menu, only the session arriving or leaving does.
+    const sessionAdapter = (0, SessionAdapterContext_1.useOptionalSessionAdapter)();
+    const sessionRef = React.useRef(sessionAdapter?.data ?? null);
+    sessionRef.current = sessionAdapter?.data ?? null;
+    const hasSession = Boolean(sessionAdapter?.data);
+    const sessionStatus = sessionAdapter?.status ?? 'unauthenticated';
     const fetchNavigation = React.useCallback(async () => {
         if (!companyId || !userId) {
             setLoading(false);
             return;
         }
+        // No session yet: wait for it (this runs again when it arrives); none at all: no menu.
+        if (!hasSession) {
+            if (sessionStatus !== 'loading')
+                setLoading(false);
+            return;
+        }
         const cacheKey = `navigation_${companyId}_${userId}`;
         const cacheTimeKey = `${cacheKey}_time`;
         const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
@@ -80,7 +95,7 @@ function NavigationProvider({ children, companyId, userId }) {
                 }
             }
             setLoading(true);
-            const navigation = await (0, api_1.getDynamicNavigation)(companyId, userId);
+            const navigation = await (0, api_1.getDynamicNavigation)(companyId, userId, sessionRef.current);
             setGroupedModules(navigation);
             localStorage.setItem(cacheKey, JSON.stringify(navigation));
             localStorage.setItem(cacheTimeKey, Date.now().toString());
@@ -92,7 +107,7 @@ function NavigationProvider({ children, companyId, userId }) {
         finally {
             setLoading(false);
         }
-    }, [companyId, userId]);
+    }, [companyId, userId, hasSession, sessionStatus]);
     React.useEffect(() => {
         fetchNavigation();
     }, [fetchNavigation]);

package/dist/cjs/contexts/NotificationContext.js

@@ -5,7 +5,7 @@ exports.NotificationProvider = NotificationProvider;
 exports.useNotifications = useNotifications;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("next-auth/react");
+const SessionAdapterContext_1 = require("./SessionAdapterContext.js");
 const activity_1 = require("../lib/api/activity/index.js");
 const types_1 = require("../lib/api/activity/notifications/types.js");
 const useSignalR_1 = require("../hooks/useSignalR.js");
@@ -15,7 +15,7 @@ const NotificationContext = (0, react_1.createContext)(undefined);
  * app. Consumers read shared state via `useNotifications()` instead of each mounting their own.
  */
 function NotificationProvider({ children }) {
-    const { data: session } = (0, react_2.useSession)();
+    const session = (0, SessionAdapterContext_1.useOptionalSessionAdapter)()?.data ?? null;
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const [notificationsLoading, setNotificationsLoading] = (0, react_1.useState)(false);
     const [showNotificationDropdown, setShowNotificationDropdown] = (0, react_1.useState)(false);

package/dist/cjs/contexts/SessionAdapterContext.js

@@ -2,6 +2,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SessionAdapterProvider = SessionAdapterProvider;
+exports.useOptionalSessionAdapter = useOptionalSessionAdapter;
 exports.useSessionAdapter = useSessionAdapter;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -14,6 +15,13 @@ function SessionAdapterProvider({ user, status, signOut, children }) {
     }), [user, status, signOut]);
     return (0, jsx_runtime_1.jsx)(SessionAdapterContext.Provider, { value: value, children: children });
 }
+/**
+ * The session when a provider is present, null when not: for components that also render in apps
+ * without one, such as the dynamic sidebar, which simply loads no menu then.
+ */
+function useOptionalSessionAdapter() {
+    return (0, react_1.useContext)(SessionAdapterContext);
+}
 /** Drop-in replacement for next-auth's `useSession()` inside library components. */
 function useSessionAdapter() {
     const ctx = (0, react_1.useContext)(SessionAdapterContext);