indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/chat/multimodal-input.js

@@ -0,0 +1,117 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultimodalInput = MultimodalInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Multimodal Input Component
+ * Chat input with auto-expanding textarea, file upload, and voice input
+ */
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+function MultimodalInput({ onSubmit, onStop, isLoading = false, placeholder = 'Send a message...', allowFileUpload = true, compact = false, disabled = false, disabledReason }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [input, setInput] = (0, react_1.useState)('');
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [isListening, setIsListening] = (0, react_1.useState)(false);
+    const textareaRef = (0, react_1.useRef)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const recognitionRef = (0, react_1.useRef)(null);
+    // Voice input support check (must be in state to survive SSR hydration)
+    const [speechSupported, setSpeechSupported] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setSpeechSupported(typeof window !== 'undefined' &&
+            !!(window.SpeechRecognition || window.webkitSpeechRecognition));
+    }, []);
+    const handleVoiceInput = (0, react_1.useCallback)(() => {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognition)
+            return;
+        if (isListening) {
+            recognitionRef.current?.stop();
+            setIsListening(false);
+            return;
+        }
+        // Fresh instance every click — reusing a stopped instance throws InvalidStateError
+        const recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-IN';
+        recognition.onresult = (event) => {
+            const transcript = event.results[0]?.[0]?.transcript;
+            if (transcript) {
+                setInput(prev => prev + (prev ? ' ' : '') + transcript.trim());
+            }
+            setIsListening(false);
+            recognitionRef.current = null;
+        };
+        recognition.onerror = (event) => {
+            setIsListening(false);
+            recognitionRef.current = null;
+        };
+        recognition.onend = () => {
+            setIsListening(false);
+            recognitionRef.current = null;
+        };
+        recognitionRef.current = recognition;
+        try {
+            recognition.start();
+            setIsListening(true);
+        }
+        catch {
+            setIsListening(false);
+            recognitionRef.current = null;
+        }
+    }, [isListening]);
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        return () => { recognitionRef.current?.abort(); };
+    }, []);
+    // Auto-focus textarea on mount
+    (0, react_1.useEffect)(() => {
+        const timer = setTimeout(() => { textareaRef.current?.focus(); }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+    // Auto-resize textarea
+    (0, react_1.useEffect)(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        }
+    }, [input]);
+    const handleSubmit = () => {
+        if (disabled)
+            return;
+        if (!input.trim() && files.length === 0)
+            return;
+        onSubmit(input, files.length > 0 ? files : undefined);
+        setInput('');
+        setFiles([]);
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            textareaRef.current.focus();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    const handleFileSelect = (e) => {
+        const selectedFiles = Array.from(e.target.files || []);
+        setFiles(prev => [...prev, ...selectedFiles]);
+    };
+    const removeFile = (index) => {
+        setFiles(prev => prev.filter((_, i) => i !== index));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-[rgb(var(--bg-surface))] shrink-0", compact ? "px-1 py-1" : "border-t border-[rgb(var(--bd-default))] px-4 py-2.5"), children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-3xl mx-auto", children: [disabled && disabledReason && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 text-xs text-amber-700 dark:text-amber-400 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), (0, jsx_runtime_1.jsx)("span", { children: disabledReason })] })), files.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2 mb-3", children: files.map((file, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 bg-[rgb(var(--bg-app))] border border-[rgb(var(--bd-default))] rounded-lg text-sm", children: [file.type.startsWith('image/') ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Image, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.FileIcon, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-default))] truncate max-w-[150px]", children: file.name }), (0, jsx_runtime_1.jsx)("button", { onClick: () => removeFile(index), className: "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3" }) })] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative flex items-center gap-1 bg-[rgb(var(--bg-app))]/60 backdrop-blur-xl border border-[rgb(var(--bd-default))] shadow-lg transition-all duration-250 focus-within:border-[rgb(var(--color-primary))] focus-within:shadow-[0_0_0_4px_rgb(var(--color-primary)/0.12),0_20px_25px_-5px_rgba(0,0,0,0.15)] focus-within:-translate-y-px", compact ? "rounded-xl p-1.5" : "rounded-2xl p-2.5"), children: [allowFileUpload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: "image/*,application/pdf,.doc,.docx,.txt", onChange: handleFileSelect, className: "hidden" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => fileInputRef.current?.click(), className: "shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]", "aria-label": "Attach file", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { className: "w-4 h-4" }) })] })), (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, "data-chat-input": true, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: disabled ? t('Conversation closed — start a new chat')
+                                : isListening ? t('Listening...')
+                                    : placeholder, disabled: isListening || disabled, autoFocus: !disabled, rows: 1, className: (0, utils_1.cn)('flex-1 bg-transparent text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))]', 'resize-none outline-none text-sm', compact ? 'px-2 py-1.5 max-h-[120px]' : 'px-3 py-2.5 max-h-[200px]', 'overflow-y-auto', disabled && 'cursor-not-allowed') }), speechSupported && ((0, jsx_runtime_1.jsx)("button", { onClick: handleVoiceInput, className: (0, utils_1.cn)('shrink-0 !min-h-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors', isListening
+                                ? 'text-red-500 bg-red-500/10 animate-pulse'
+                                : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'), "aria-label": isListening ? t('Stop listening') : t('Voice input'), children: isListening ? (0, jsx_runtime_1.jsx)(lucide_react_1.MicOff, { className: "w-4 h-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Mic, { className: "w-4 h-4" }) })), isLoading && onStop ? ((0, jsx_runtime_1.jsx)("button", { onClick: onStop, className: "shrink-0 !min-h-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-[180ms] ease-out shadow-sm bg-[rgb(var(--color-primary))] text-white hover:opacity-90 hover:scale-[1.04] active:scale-95 ring-1 ring-[rgb(var(--color-primary))]/20", "aria-label": "Stop generation", title: "Stop", children: (0, jsx_runtime_1.jsx)("span", { className: "w-2.5 h-2.5 rounded-[2px] bg-white" }) })) : ((0, jsx_runtime_1.jsx)("button", { onClick: handleSubmit, disabled: (!input.trim() && files.length === 0) || isListening || disabled, className: (0, utils_1.cn)('shrink-0 !min-h-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-[180ms] ease-out shadow-md', (input.trim() || files.length > 0) && !isListening && !disabled
+                                ? 'bg-[rgb(var(--color-primary))] text-white hover:scale-[1.06] active:scale-95'
+                                : 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] cursor-not-allowed shadow-none'), "aria-label": "Send message", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "w-4 h-4 transition-transform duration-200 active:rotate-45" }) }))] })] }) }));
+}

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

@@ -0,0 +1,36 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrillDownModal = DrillDownModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../index.js");
+const components_2 = require("../index.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+function DrillDownModal({ drill, onClose, columns, getRowId, fetcher, titlePrefix }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [rows, setRows] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const load = (0, react_1.useCallback)(async (ctx) => {
+        setLoading(true);
+        setError(null);
+        try {
+            setRows(await fetcher(ctx));
+        }
+        catch {
+            setError(t('Failed to load details'));
+            setRows([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [fetcher, t]);
+    (0, react_1.useEffect)(() => {
+        if (drill)
+            load(drill);
+        else
+            setRows([]);
+    }, [drill, load]);
+    return ((0, jsx_runtime_1.jsx)(components_1.StandardModal, { isOpen: !!drill, onClose: onClose, title: drill?.label || '', subtitle: titlePrefix, size: "xl", showFooter: false, children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "h-64 flex items-center justify-center text-sm text-[rgb(var(--fg-muted))]", children: t('Loading...') })) : error ? ((0, jsx_runtime_1.jsx)("div", { className: "h-64 flex items-center justify-center text-sm text-[rgb(var(--color-error))]", children: error })) : ((0, jsx_runtime_1.jsx)(components_2.DataGrid, { data: rows, columns: columns, getRowId: getRowId, pageSize: 15, enablePagination: true, enableSorting: true, enableFilterRow: true, title: `${drill?.label || ''} (${rows.length})` })) }));
+}

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

@@ -0,0 +1,434 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FORECAST_METHODS = void 0;
+exports.computeForecast = computeForecast;
+exports.projectForecast = projectForecast;
+exports.FilterBar = FilterBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const dropdown_1 = require("../forms/dropdown/index.js");
+const date_picker_1 = require("../forms/date-picker/index.js");
+const tabs_1 = require("../ui/navigation/tabs.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const ui_1 = require("../ui/index.js");
+exports.FORECAST_METHODS = [
+    { value: 'ma', label: 'Moving Avg', hint: 'Averages the last N values, all counted equally. Smooths out spikes but lags behind real shifts.' },
+    { value: 'wma', label: 'Weighted', hint: 'Averages the last N values, newer ones weighted higher. Picks up recent changes sooner.' },
+    { value: 'es', label: 'Exponential', hint: 'Blends all history, with influence fading the older a value gets. Smooth yet quick to adapt.' },
+    { value: 'holt', label: 'Trend', hint: 'Exponential smoothing plus a trend component. The only method that projects the slope into future periods.' },
+];
+const FORECAST_PERIOD_LIMITS = {
+    Day: { min: 2, max: 60 },
+    Week: { min: 2, max: 52 },
+    Month: { min: 2, max: 24 },
+    Quarter: { min: 2, max: 12 },
+    Year: { min: 2, max: 10 },
+};
+const FORECAST_HORIZON_LIMITS = {
+    Day: { min: 1, max: 30 },
+    Week: { min: 1, max: 26 },
+    Month: { min: 1, max: 12 },
+    Quarter: { min: 1, max: 8 },
+    Year: { min: 1, max: 5 },
+};
+const SHORT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+function labelForUnit(timeFilter, offset) {
+    const now = new Date();
+    switch (timeFilter) {
+        case 'Day': {
+            const d = new Date(now);
+            d.setDate(now.getDate() + offset);
+            return `${d.getDate()} ${SHORT_MONTHS[d.getMonth()]}`;
+        }
+        case 'Week': {
+            const d = new Date(now);
+            d.setDate(now.getDate() + offset * 7);
+            const oneJan = new Date(d.getFullYear(), 0, 1);
+            const week = Math.ceil((((d.getTime() - oneJan.getTime()) / 86400000) + oneJan.getDay() + 1) / 7);
+            return `W${week}`;
+        }
+        case 'Month': {
+            const d = new Date(now.getFullYear(), now.getMonth() + offset, 1);
+            return `${SHORT_MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+        }
+        case 'Quarter': {
+            const d = new Date(now.getFullYear(), now.getMonth() + offset * 3, 1);
+            return `Q${Math.floor(d.getMonth() / 3) + 1} ${d.getFullYear()}`;
+        }
+        case 'Year':
+            return String(now.getFullYear() + offset);
+    }
+}
+/** Range covering `count` periods. dir=-1 means the last N (ending this period), dir=+1 means next N (starting next period). */
+function resolvePeriodRange(timeFilter, count, dir) {
+    if (count < 1)
+        return '';
+    const start = dir === -1 ? -(count - 1) : 1;
+    const end = dir === -1 ? 0 : count;
+    const startLabel = labelForUnit(timeFilter, start);
+    const endLabel = labelForUnit(timeFilter, end);
+    return count === 1 ? endLabel : `${startLabel} – ${endLabel}`;
+}
+const HOLT_BETA = 0.3;
+function holtState(values, period) {
+    const alpha = 2 / (period + 1);
+    let level = values[0];
+    let trend = values.length > 1 ? values[1] - values[0] : 0;
+    for (let i = 1; i < values.length; i++) {
+        const prevLevel = level;
+        level = alpha * values[i] + (1 - alpha) * (level + trend);
+        trend = HOLT_BETA * (level - prevLevel) + (1 - HOLT_BETA) * trend;
+    }
+    return { level, trend };
+}
+function computeForecast(values, method, period) {
+    if (period < 1 || values.length === 0)
+        return values.map(() => null);
+    if (method === 'es' || method === 'holt') {
+        const alpha = 2 / (period + 1);
+        const out = [values[0]];
+        if (method === 'es') {
+            for (let i = 1; i < values.length; i++) {
+                out.push(alpha * values[i] + (1 - alpha) * out[i - 1]);
+            }
+        }
+        else {
+            let level = values[0];
+            let trend = values.length > 1 ? values[1] - values[0] : 0;
+            for (let i = 1; i < values.length; i++) {
+                const prevLevel = level;
+                level = alpha * values[i] + (1 - alpha) * (level + trend);
+                trend = HOLT_BETA * (level - prevLevel) + (1 - HOLT_BETA) * trend;
+                out.push(level);
+            }
+        }
+        return out;
+    }
+    return values.map((_, i) => {
+        if (i < period - 1)
+            return null;
+        const window = values.slice(i - period + 1, i + 1);
+        if (method === 'wma') {
+            const denom = (period * (period + 1)) / 2;
+            return window.reduce((sum, v, j) => sum + v * (j + 1), 0) / denom;
+        }
+        return window.reduce((sum, v) => sum + v, 0) / period;
+    });
+}
+function projectForecast(values, method, period, horizon) {
+    if (values.length === 0 || horizon < 1 || period < 1)
+        return [];
+    if (method === 'holt') {
+        const { level, trend } = holtState(values, period);
+        return Array.from({ length: horizon }, (_, h) => level + trend * (h + 1));
+    }
+    let next;
+    if (method === 'es') {
+        const smoothed = computeForecast(values, 'es', period);
+        next = smoothed[smoothed.length - 1];
+    }
+    else {
+        const window = values.slice(-period);
+        if (method === 'wma') {
+            const n = window.length;
+            const denom = (n * (n + 1)) / 2;
+            next = window.reduce((sum, v, j) => sum + v * (j + 1), 0) / denom;
+        }
+        else {
+            next = window.reduce((sum, v) => sum + v, 0) / window.length;
+        }
+    }
+    return Array.from({ length: horizon }, () => next);
+}
+// ============================================================================
+// FilterBar Component
+// ============================================================================
+// Time filter dropdown options — quick = relative shortcuts (pinned footer), options = explicit list
+const DAY_QUICK = [
+    { value: 'today', label: 'Today' },
+    { value: 'yesterday', label: 'Yesterday' },
+    { value: 'last7', label: 'Last 7 Days' },
+    { value: 'last14', label: 'Last 14 Days' },
+    { value: 'last30', label: 'Last 30 Days' },
+];
+const DAY_OPTIONS = DAY_QUICK;
+const WEEK_QUICK = [
+    { value: 'this', label: 'This Week' },
+    { value: 'last', label: 'Last Week' },
+    { value: 'last2', label: 'Last 2 Weeks' },
+    { value: 'last4', label: 'Last 4 Weeks' },
+];
+// Fallback static list; the live options are built fiscal-year-aware in buildTimeOptions().
+const WEEK_OPTIONS = [
+    { value: 'W1', label: 'Week 1' },
+    { value: 'W2', label: 'Week 2' },
+    { value: 'W3', label: 'Week 3' },
+    { value: 'W4', label: 'Week 4' },
+    { value: 'W5', label: 'Week 5' },
+];
+const MONTH_QUICK = [
+    { value: 'this', label: 'This Month' },
+    { value: 'last', label: 'Last Month' },
+];
+const MONTH_OPTIONS = [
+    { value: 'jan', label: 'Jan' },
+    { value: 'feb', label: 'Feb' },
+    { value: 'mar', label: 'Mar' },
+    { value: 'apr', label: 'Apr' },
+    { value: 'may', label: 'May' },
+    { value: 'jun', label: 'Jun' },
+    { value: 'jul', label: 'Jul' },
+    { value: 'aug', label: 'Aug' },
+    { value: 'sep', label: 'Sep' },
+    { value: 'oct', label: 'Oct' },
+    { value: 'nov', label: 'Nov' },
+    { value: 'dec', label: 'Dec' },
+];
+const QUARTER_QUICK = [
+    { value: 'this', label: 'This Quarter' },
+    { value: 'last', label: 'Last Quarter' },
+];
+const QUARTER_OPTIONS = [
+    { value: 'Q1', label: 'Q1 (Apr-Jun)' },
+    { value: 'Q2', label: 'Q2 (Jul-Sep)' },
+    { value: 'Q3', label: 'Q3 (Oct-Dec)' },
+    { value: 'Q4', label: 'Q4 (Jan-Mar)' },
+];
+const currentYear = new Date().getFullYear();
+const YEAR_QUICK = [
+    { value: 'this', label: 'This Year' },
+    { value: 'last', label: 'Last Year' },
+];
+const YEAR_OPTIONS = [
+    { value: String(currentYear), label: String(currentYear) },
+    { value: String(currentYear - 1), label: String(currentYear - 1) },
+    { value: String(currentYear - 2), label: String(currentYear - 2) },
+    { value: String(currentYear - 3), label: String(currentYear - 3) },
+];
+// Time filter toggle options with dropdown configs (static fallback)
+const TIME_FILTER_OPTIONS = [
+    { value: 'Day', label: 'Day', dropdownOptions: DAY_OPTIONS, quickOptions: DAY_QUICK },
+    { value: 'Week', label: 'Week', dropdownOptions: WEEK_OPTIONS, quickOptions: WEEK_QUICK },
+    { value: 'Month', label: 'Month', dropdownOptions: MONTH_OPTIONS, quickOptions: MONTH_QUICK },
+    { value: 'Quarter', label: 'Quarter', dropdownOptions: QUARTER_OPTIONS, quickOptions: QUARTER_QUICK },
+    { value: 'Year', label: 'Year', dropdownOptions: YEAR_OPTIONS, quickOptions: YEAR_QUICK },
+];
+const fmtFiscalDay = (d) => `${String(d.getDate()).padStart(2, '0')} ${SHORT_MONTHS[d.getMonth()]}`;
+// 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) {
+    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),
+    // then each week runs Mon–Sun; the last week is clamped to 31 Mar.
+    const firstSunday = new Date(fyStart, 3, 1 + ((7 - fyOpen.getDay()) % 7));
+    const weeks = [];
+    let from = new Date(fyOpen);
+    let sunday = new Date(firstSunday);
+    let wk = 1;
+    while (from <= fyClose) {
+        const to = sunday > fyClose ? fyClose : sunday;
+        weeks.push({ value: `W${wk}`, label: `Week ${wk} (${fmtFiscalDay(from)} – ${fmtFiscalDay(to)})` });
+        from = new Date(sunday.getFullYear(), sunday.getMonth(), sunday.getDate() + 1);
+        sunday = new Date(from.getFullYear(), from.getMonth(), from.getDate() + 6);
+        wk++;
+    }
+    const months = Array.from({ length: 12 }, (_, i) => {
+        const mo = (3 + i) % 12;
+        const yr = mo >= 3 ? fyStart : fyStart + 1;
+        return { value: `${mo}`, label: `${SHORT_MONTHS[mo]} ${yr}` };
+    });
+    const quarters = [
+        { value: 'Q1', label: `Q1 (Apr – Jun ${fyStart})` },
+        { value: 'Q2', label: `Q2 (Jul – Sep ${fyStart})` },
+        { value: 'Q3', label: `Q3 (Oct – Dec ${fyStart})` },
+        { value: 'Q4', label: `Q4 (Jan – Mar ${fyStart + 1})` },
+    ];
+    const years = [{ value: `${fyStart}`, label: `${fyStart}-${fyStart + 1}` }];
+    return [
+        { value: 'Day', label: 'Day', dropdownOptions: DAY_OPTIONS, quickOptions: DAY_QUICK },
+        { value: 'Week', label: 'Week', dropdownOptions: weeks, quickOptions: WEEK_QUICK },
+        { value: 'Month', label: 'Month', dropdownOptions: months, quickOptions: MONTH_QUICK },
+        { value: 'Quarter', label: 'Quarter', dropdownOptions: quarters, quickOptions: QUARTER_QUICK },
+        { value: 'Year', label: 'Year', dropdownOptions: years, quickOptions: YEAR_QUICK },
+    ];
+}
+function Stepper({ value, min, max, onChange }) {
+    const [text, setText] = (0, react_1.useState)(String(value));
+    (0, react_1.useEffect)(() => {
+        setText(String(value));
+    }, [value]);
+    const commit = () => {
+        const parsed = parseInt(text, 10);
+        const clamped = isNaN(parsed) ? value : Math.min(max, Math.max(min, parsed));
+        setText(String(clamped));
+        if (clamped !== value)
+            onChange(clamped);
+    };
+    const buttonClasses = (0, utils_1.cn)('w-7 h-7 rounded-md flex items-center justify-center transition-colors shrink-0', 'border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))]', 'hover:bg-[rgb(var(--bg-subtle))] disabled:opacity-40 disabled:pointer-events-none');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(value - 1), disabled: value <= min, className: buttonClasses, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { className: "w-3.5 h-3.5" }) }), (0, jsx_runtime_1.jsx)("input", { value: text, onChange: (e) => setText(e.target.value.replace(/\D/g, '')), onBlur: commit, onKeyDown: (e) => e.key === 'Enter' && e.target.blur(), inputMode: "numeric", className: (0, utils_1.cn)('flex-1 h-7 w-full min-w-0 rounded-md border border-[rgb(var(--bd-default))] bg-transparent', 'text-center text-xs font-semibold text-[rgb(var(--fg-default))]', 'focus:outline-none focus:border-[rgb(var(--color-primary))]') }), (0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(value + 1), disabled: value >= max, className: buttonClasses, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "w-3.5 h-3.5" }) })] }));
+}
+function OverflowMenu({ showInsights, insightsActive, onInsightsClick, reports, onReportSelect, onShare, onExport }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, utils_1.cn)('w-7 h-7 rounded-md flex items-center justify-center transition-colors', 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'), title: t('More'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { className: "w-4 h-4" }) }) }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuContent, { align: "end", className: "w-52 [&_[role=menuitem]]:cursor-pointer", children: [showInsights && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: onInsightsClick, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lightbulb, { className: (0, utils_1.cn)('w-4 h-4 mr-2', insightsActive && 'text-[rgb(var(--color-warning))]') }), t('Sahay Insights')] })), reports.length > 0 && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileBarChart, { className: "w-4 h-4 mr-2" }), t('Reports')] }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSubContent, { children: reports.map((report) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onClick: () => onReportSelect?.(report.value), children: report.label }, report.value))) })] })), onShare && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: onShare, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { className: "w-4 h-4 mr-2" }), t('Share')] })), onExport && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileOutput, { className: "w-4 h-4 mr-2" }), t('Export')] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onExport('print'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Printer, { className: "w-4 h-4 mr-2" }), t('Print')] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onExport('excel'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileSpreadsheet, { className: "w-4 h-4 mr-2" }), t('Excel')] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onExport('pdf'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-4 h-4 mr-2" }), t('PDF')] })] })] }))] })] }));
+}
+function ForecastControl({ forecast, onForecastChange, timeFilter, onTimeFilterChange, bare = false }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    const limits = FORECAST_PERIOD_LIMITS[timeFilter];
+    const horizonLimits = FORECAST_HORIZON_LIMITS[timeFilter];
+    (0, react_1.useEffect)(() => {
+        const period = Math.min(limits.max, Math.max(limits.min, forecast.period));
+        const horizon = Math.min(horizonLimits.max, Math.max(horizonLimits.min, forecast.horizon));
+        if (period !== forecast.period || horizon !== forecast.horizon) {
+            onForecastChange({ ...forecast, period, horizon });
+        }
+    }, [timeFilter]);
+    const setPeriod = (p) => {
+        onForecastChange({ ...forecast, period: Math.min(limits.max, Math.max(limits.min, p)) });
+    };
+    const setHorizon = (h) => {
+        onForecastChange({ ...forecast, horizon: Math.min(horizonLimits.max, Math.max(horizonLimits.min, h)) });
+    };
+    const activeMethod = exports.FORECAST_METHODS.find(m => m.value === forecast.method);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (target?.closest?.('[data-radix-popper-content-wrapper],[role="listbox"]'))
+                return;
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: containerRef, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setOpen(!open), className: (0, utils_1.cn)('flex items-center justify-center transition-colors relative', bare ? 'w-7 h-7 rounded-md' : 'w-8 h-8 rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', open
+                    ? 'bg-[rgb(var(--color-primary))] text-white shadow-sm'
+                    : bare
+                        ? 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'
+                        : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]'), title: t('Forecast'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-4 h-4" }), forecast.enabled && !open && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50 w-96 max-w-[calc(100vw-2rem)]', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))] shrink-0", children: t('Forecast') }), onTimeFilterChange ? ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: TIME_FILTER_OPTIONS.map(o => ({ value: o.value, label: t(o.label) })), value: timeFilter, onValueChange: (v) => onTimeFilterChange(v), searchable: false, size: "sm", triggerClassName: "h-6 text-[11px] min-w-[6.5rem]" })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: ["\u00B7 ", t(timeFilter)] }))] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: forecast.enabled, onCheckedChange: (enabled) => onForecastChange({ ...forecast, enabled }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('p-3 space-y-3', !forecast.enabled && 'opacity-50 pointer-events-none'), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: exports.FORECAST_METHODS.map(m => ({ id: m.value, label: t(m.label) })), activeTab: forecast.method, onTabChange: (tabId) => onForecastChange({ ...forecast, method: tabId }), variant: "rounded", size: "sm", fullWidth: true }), activeMethod && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: t(activeMethod.hint) })), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Based On Last') }), (0, jsx_runtime_1.jsx)(Stepper, { value: forecast.period, min: limits.min, max: limits.max, onChange: setPeriod }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.period, -1) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Forecast Ahead') }), (0, jsx_runtime_1.jsx)(Stepper, { value: forecast.horizon, min: horizonLimits.min, max: horizonLimits.max, onChange: setHorizon }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.horizon, 1) })] })] })] })] }))] }));
+}
+function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = 'Week', onTimeFilterChange, timeFilterSelection, onTimeFilterSelectionChange, hideTimeFilter = false, filters = [], filterValues = {}, onFilterChange, dateFrom, dateTo, onDateFromChange, onDateToChange, onApply, onReset, reports = [], onReportSelect, onExport, hideFilterButton = false, hideDateRange = false, showApplyButton = false, forecast, onForecastChange, onShare, showInsights = false, insightsActive = false, onInsightsClick, children, className, layout = 'default', fiscalStartYear }) {
+    const [popoverOpen, setPopoverOpen] = (0, react_1.useState)(false);
+    const popoverRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const timeOptions = (0, react_1.useMemo)(() => (fiscalStartYear ? buildTimeOptions(fiscalStartYear) : TIME_FILTER_OPTIONS), [fiscalStartYear]);
+    // 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.
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (target?.closest?.('[data-radix-popper-content-wrapper],[role="listbox"]'))
+                return;
+            if (popoverOpen &&
+                popoverRef.current &&
+                !popoverRef.current.contains(e.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(e.target)) {
+                setPopoverOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [popoverOpen]);
+    // Handle escape key
+    (0, react_1.useEffect)(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && popoverOpen) {
+                setPopoverOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [popoverOpen]);
+    const handleDateRangeChange = (0, react_1.useCallback)((value) => {
+        if (value && typeof value === 'object' && 'from' in value) {
+            const range = value;
+            onDateFromChange?.(range.from);
+            onDateToChange?.(range.to);
+        }
+    }, [onDateFromChange, onDateToChange]);
+    const handleReset = () => {
+        onDateFromChange?.(undefined);
+        onDateToChange?.(undefined);
+        onReset?.();
+    };
+    const hasActiveFilters = Object.values(filterValues).some(v => v && v.length > 0) || dateFrom || dateTo;
+    const dateRangeValue = { from: dateFrom, to: dateTo };
+    // Centered layout: Title in center, controls on left and right
+    if (layout === 'centered') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', className), children: (0, jsx_runtime_1.jsx)("div", { className: "px-4 py-3 lg:px-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [secondaryToggle && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+                                        Day: timeFilterSelection?.days || [],
+                                        Week: timeFilterSelection?.weeks || [],
+                                        Month: timeFilterSelection?.months || [],
+                                        Quarter: timeFilterSelection?.quarters || [],
+                                        Year: timeFilterSelection?.years || [],
+                                    }, onDropdownChange: (tabId, selectedValues) => {
+                                        const filter = tabId;
+                                        const newSelection = {
+                                            type: filter,
+                                            ...(filter === 'Day' && { days: selectedValues }),
+                                            ...(filter === 'Week' && { weeks: selectedValues }),
+                                            ...(filter === 'Month' && { months: selectedValues }),
+                                            ...(filter === 'Quarter' && { quarters: selectedValues }),
+                                            ...(filter === 'Year' && { years: selectedValues }),
+                                        };
+                                        onTimeFilterSelectionChange?.(newSelection);
+                                    } }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title }), contextLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: contextLabel }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [!hideFilterButton && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: (0, utils_1.cn)('w-8 h-8 rounded-md flex items-center justify-center transition-colors relative', 'border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]', popoverOpen && 'bg-[rgb(var(--color-primary))] text-white border-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${filters.length}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange })), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" })), (reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] })] }) }) }));
+    }
+    // Default layout: Title centered, controls on right
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', 'px-4 py-3 lg:px-6', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-base sm:text-xl font-bold text-[rgb(var(--fg-default))] leading-tight truncate", children: title }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "hidden sm:inline-flex items-center gap-1.5 shrink-0 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [secondaryToggle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" }) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block h-4 w-px bg-[rgb(var(--bd-default))] self-center" })] })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+                                        Day: timeFilterSelection?.days || [],
+                                        Week: timeFilterSelection?.weeks || [],
+                                        Month: timeFilterSelection?.months || [],
+                                        Quarter: timeFilterSelection?.quarters || [],
+                                        Year: timeFilterSelection?.years || [],
+                                    }, onDropdownChange: (tabId, selectedValues) => {
+                                        const filter = tabId;
+                                        const newSelection = {
+                                            type: filter,
+                                            ...(filter === 'Day' && { days: selectedValues }),
+                                            ...(filter === 'Week' && { weeks: selectedValues }),
+                                            ...(filter === 'Month' && { months: selectedValues }),
+                                            ...(filter === 'Quarter' && { quarters: selectedValues }),
+                                            ...(filter === 'Year' && { years: selectedValues }),
+                                        };
+                                        onTimeFilterSelectionChange?.(newSelection);
+                                    } }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-0.5 rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-0.5", children: [!hideFilterButton && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: (0, utils_1.cn)('w-7 h-7 rounded-md flex items-center justify-center transition-colors relative', popoverOpen
+                                                    ? 'bg-[rgb(var(--color-primary))] text-white shadow-sm'
+                                                    : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${Math.min(filters.length, 3)}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange, bare: true })), (showInsights || reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { showInsights: showInsights, insightsActive: insightsActive, onInsightsClick: onInsightsClick, reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] }), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" }))] })] }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "sm:hidden mt-2 inline-flex items-center gap-1.5 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] })), (!hideTimeFilter || secondaryToggle) && ((0, jsx_runtime_1.jsxs)("div", { className: "sm:hidden mt-2 flex items-center gap-2 overflow-x-auto", children: [secondaryToggle && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+                            Day: timeFilterSelection?.days || [],
+                            Week: timeFilterSelection?.weeks || [],
+                            Month: timeFilterSelection?.months || [],
+                            Quarter: timeFilterSelection?.quarters || [],
+                            Year: timeFilterSelection?.years || [],
+                        }, onDropdownChange: (tabId, selectedValues) => {
+                            const filter = tabId;
+                            const newSelection = {
+                                type: filter,
+                                ...(filter === 'Day' && { days: selectedValues }),
+                                ...(filter === 'Week' && { weeks: selectedValues }),
+                                ...(filter === 'Month' && { months: selectedValues }),
+                                ...(filter === 'Quarter' && { quarters: selectedValues }),
+                                ...(filter === 'Year' && { years: selectedValues }),
+                            };
+                            onTimeFilterSelectionChange?.(newSelection);
+                        } }))] }))] }));
+}