indas-ui 0.0.1 → 0.1.1

package/dist/components/dashboard/kpi/KpiScroll.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight, ArrowRight, ChevronDown } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * KpiScroll - Horizontal scrollable KPI cards
+ *
+ * Great for: Channel stats, customer metrics, quick summaries
+ */
+export function KpiScroll({ title, description, periodOptions, periodValue, onPeriodChange, items, showViewAll = true, onViewAll, viewAllLabel = 'Full Stats', variant = 'default', className }) {
+    const scrollContainerRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const [periodDropdownOpen, setPeriodDropdownOpen] = useState(false);
+    const periodDropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (periodDropdownRef.current && !periodDropdownRef.current.contains(e.target)) {
+                setPeriodDropdownOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const checkScrollability = () => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            setCanScrollLeft(container.scrollLeft > 0);
+            setCanScrollRight(container.scrollLeft < container.scrollWidth - container.clientWidth - 1);
+        }
+    };
+    useEffect(() => {
+        checkScrollability();
+        const container = scrollContainerRef.current;
+        if (container) {
+            container.addEventListener('scroll', checkScrollability);
+            window.addEventListener('resize', checkScrollability);
+            return () => {
+                container.removeEventListener('scroll', checkScrollability);
+                window.removeEventListener('resize', checkScrollability);
+            };
+        }
+    }, [items]);
+    const scroll = (direction) => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            const scrollAmount = variant === 'compact' ? 200 : 280;
+            container.scrollBy({
+                left: direction === 'left' ? -scrollAmount : scrollAmount,
+                behavior: 'smooth'
+            });
+        }
+    };
+    const getSentimentColor = (sentiment) => {
+        switch (sentiment) {
+            case 'positive':
+                return 'text-[rgb(var(--color-success))]';
+            case 'negative':
+                return 'text-[rgb(var(--color-error))]';
+            default:
+                return 'text-[rgb(var(--fg-default))]';
+        }
+    };
+    const getCardWidth = () => {
+        switch (variant) {
+            case 'compact':
+                return 'w-[120px] sm:w-[140px]';
+            case 'detailed':
+                return 'w-[180px] sm:w-[200px]';
+            default:
+                return 'w-[140px] sm:w-[160px]';
+        }
+    };
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-2xl border border-[rgb(var(--bd-default))] overflow-hidden', className), children: [(title || description || periodOptions) && (_jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-5 pt-5 pb-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [title && (_jsx("h3", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: title })), periodOptions && periodOptions.length > 0 && (_jsxs("div", { ref: periodDropdownRef, className: "relative", children: [_jsxs("button", { onClick: () => setPeriodDropdownOpen(!periodDropdownOpen), className: "flex items-center gap-1 text-xs text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] hover:bg-[rgb(var(--bg-hover))] px-2.5 py-1 rounded-full transition-colors", children: [periodOptions.find(o => o.value === periodValue)?.label || periodOptions[0]?.label, _jsx(ChevronDown, { className: cn('w-3.5 h-3.5 transition-transform', periodDropdownOpen && 'rotate-180') })] }), periodDropdownOpen && (_jsx("div", { className: "absolute top-full left-0 mt-1 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg py-1 min-w-[100px] z-20", children: periodOptions.map((option) => (_jsx("button", { onClick: () => {
+                                                onPeriodChange?.(option.value);
+                                                setPeriodDropdownOpen(false);
+                                            }, className: cn('w-full text-left px-3 py-1.5 text-xs hover:bg-[rgb(var(--bg-hover))] transition-colors', periodValue === option.value ? 'text-[rgb(var(--color-primary))] font-medium' : 'text-[rgb(var(--fg-default))]'), children: option.label }, option.value))) }))] }))] }), description && (_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: description }))] })), _jsxs("div", { className: "relative group px-5 pb-5", children: [canScrollLeft && (_jsx("button", { onClick: () => scroll('left'), className: cn('absolute left-2 top-1/2 -translate-y-1/2 z-10', 'w-9 h-9 rounded-full flex items-center justify-center', 'bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] shadow-lg', 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]', 'transition-all duration-200', 'opacity-0 group-hover:opacity-100'), children: _jsx(ChevronLeft, { className: "w-5 h-5" }) })), canScrollRight && (_jsx("button", { onClick: () => scroll('right'), className: cn('absolute right-2 top-1/2 -translate-y-1/2 z-10', 'w-9 h-9 rounded-full flex items-center justify-center', 'bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] shadow-lg', 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]', 'transition-all duration-200', 'opacity-0 group-hover:opacity-100'), children: _jsx(ChevronRight, { className: "w-5 h-5" }) })), _jsxs("div", { ref: scrollContainerRef, className: "flex gap-3 overflow-x-auto scrollbar-hide scroll-smooth", style: { scrollbarWidth: 'none', msOverflowStyle: 'none' }, children: [items.map((item) => (_jsxs("div", { onClick: item.onClick, className: cn('flex-shrink-0', getCardWidth(), 'bg-[rgb(var(--bg-subtle))] rounded-xl p-4', 'border border-transparent', 'transition-all duration-200', 'hover:bg-[rgb(var(--bg-hover))] hover:shadow-md', item.onClick && 'cursor-pointer hover:border-[rgb(var(--color-primary))]'), children: [(item.icon || item.customIcon) && (_jsx("div", { className: "mb-3", children: item.customIcon ? (item.customIcon) : item.icon ? (_jsx("div", { className: cn('w-11 h-11 rounded-xl flex items-center justify-center', item.iconBg || 'bg-[rgb(var(--color-primary))]/10'), children: _jsx(item.icon, { className: cn('w-5 h-5', item.iconColor || 'text-[rgb(var(--color-primary))]') }) })) : null })), _jsx("p", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] truncate", children: item.title }), item.subtitle && (_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] truncate mt-0.5", children: item.subtitle })), _jsxs("p", { className: cn('text-xl font-bold mt-2', getSentimentColor(item.sentiment)), children: [item.prefix, item.value, item.suffix] }), item.secondaryValue && (_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: item.secondaryValue }))] }, item.id))), showViewAll && onViewAll && (_jsxs("button", { onClick: onViewAll, className: cn('flex-shrink-0', getCardWidth(), 'bg-[rgb(var(--color-primary))] rounded-xl p-4', 'flex flex-col items-center justify-center gap-2', 'cursor-pointer hover:brightness-110 hover:shadow-lg transition-all duration-200', 'min-h-[140px]'), children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mb-1", children: _jsx(ArrowRight, { className: "w-6 h-6 text-white" }) }), _jsx("p", { className: "text-sm font-semibold text-white text-center leading-tight", children: viewAllLabel })] }))] })] })] }));
+}

package/dist/components/dashboard/kpi/KpiTrend.d.ts

@@ -0,0 +1,28 @@
+import { LucideIcon } from 'lucide-react';
+import { type KpiShellProps } from './kpi-shell.js';
+export interface KpiTrendProps extends KpiShellProps {
+    /** Title of the KPI */
+    title: string;
+    /** Main value to display */
+    value: string | number;
+    /** Unit label (e.g., "days", "%", "hrs") */
+    unit?: string;
+    /** Change value (positive or negative) */
+    change?: number;
+    /** Change unit (defaults to same as unit) */
+    changeUnit?: string;
+    /** Description text (e.g., "Improved from 5.0 days last month") */
+    description?: string;
+    /** Icon to display next to title */
+    icon?: LucideIcon;
+    /** Icon color class — falls back to the accent color when an accent is set */
+    iconColor?: string;
+    /** Whether a decrease is positive (e.g., for lead time, costs) */
+    decreaseIsGood?: boolean;
+}
+/**
+ * KpiTrend — KPI card with trend indicator, built on the reusable KpiShell.
+ * Inherits accent / active / onClick / loading / watermark from the shell, so it
+ * works both as a plain metric card (surface) and as an interactive filter toggle.
+ */
+export declare function KpiTrend({ title, value, unit, change, changeUnit, description, icon: Icon, iconColor, decreaseIsGood, accent, active, onClick, loading, watermarkIcon, className, }: KpiTrendProps): import("react").JSX.Element;

package/dist/components/dashboard/kpi/KpiTrend.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { KpiShell, ACCENT_MAP } from './kpi-shell.js';
+/**
+ * KpiTrend — KPI card with trend indicator, built on the reusable KpiShell.
+ * Inherits accent / active / onClick / loading / watermark from the shell, so it
+ * works both as a plain metric card (surface) and as an interactive filter toggle.
+ */
+export function KpiTrend({ title, value, unit, change, changeUnit, description, icon: Icon, iconColor, decreaseIsGood = false, 
+// shell props
+accent, active, onClick, loading, watermarkIcon, className, }) {
+    const getTrendConfig = () => {
+        if (change === undefined || change === 0) {
+            return { icon: Minus, color: 'text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))]' };
+        }
+        const isPositive = change > 0;
+        const isGood = decreaseIsGood ? !isPositive : isPositive;
+        return {
+            icon: isPositive ? TrendingUp : TrendingDown,
+            color: isGood
+                ? 'text-[rgb(var(--color-success))] bg-[rgb(var(--color-success))]/10'
+                : 'text-[rgb(var(--color-error))] bg-[rgb(var(--color-error))]/10',
+        };
+    };
+    const trend = getTrendConfig();
+    const TrendIcon = trend.icon;
+    // Flat surface card unless an accent/active/onClick is requested (then use the tinted shell).
+    const surface = !accent && !active && !onClick;
+    const titleColor = accent ? ACCENT_MAP[accent].text : 'text-[rgb(var(--fg-muted))]';
+    const headIconColor = iconColor || (accent ? ACCENT_MAP[accent].text : 'text-[rgb(var(--fg-muted))]');
+    return (_jsx(KpiShell, { accent: accent, active: active, onClick: onClick, loading: loading, watermarkIcon: watermarkIcon, surface: surface, className: className, children: _jsxs("div", { className: "p-5", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [Icon && _jsx(Icon, { className: cn('w-4 h-4', headIconColor) }), _jsx("p", { className: cn('text-sm', titleColor), children: title })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), unit && _jsx("span", { className: "text-lg text-[rgb(var(--fg-muted))]", children: unit }), change !== undefined && (_jsxs("div", { className: cn('ml-auto flex items-center gap-1 px-2 py-1 rounded', trend.color), children: [_jsx(TrendIcon, { className: "w-4 h-4" }), _jsxs("span", { className: "text-sm font-medium", children: [change > 0 ? '+' : '', change, changeUnit || unit || ''] })] }))] }), description && (_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-2", children: description }))] }) }));
+}

package/dist/components/dashboard/kpi/index.d.ts

@@ -0,0 +1,16 @@
+export { KpiShell, ACCENT_MAP } from './kpi-shell.js';
+export type { KpiShellProps, KpiAccent } from './kpi-shell.js';
+export { KpiComparison } from './KpiComparison.js';
+export type { KpiComparisonProps, ComparisonBar } from './KpiComparison.js';
+export { KpiTrend } from './KpiTrend.js';
+export type { KpiTrendProps } from './KpiTrend.js';
+export { KpiBreakdown } from './KpiBreakdown.js';
+export type { KpiBreakdownProps, BreakdownItem } from './KpiBreakdown.js';
+export { KpiQuickStats } from './KpiQuickStats.js';
+export type { KpiQuickStatsProps, QuickStat } from './KpiQuickStats.js';
+export { KpiRating } from './KpiRating.js';
+export type { KpiRatingProps, RatingBreakdown } from './KpiRating.js';
+export { KpiBeforeAfter } from './KpiBeforeAfter.js';
+export type { KpiBeforeAfterProps } from './KpiBeforeAfter.js';
+export { KpiScroll } from './KpiScroll.js';
+export type { KpiScrollProps, KpiScrollItem } from './KpiScroll.js';

package/dist/components/dashboard/kpi/index.js

@@ -0,0 +1,10 @@
+'use client';
+// KPI Components
+export { KpiShell, ACCENT_MAP } from './kpi-shell.js';
+export { KpiComparison } from './KpiComparison.js';
+export { KpiTrend } from './KpiTrend.js';
+export { KpiBreakdown } from './KpiBreakdown.js';
+export { KpiQuickStats } from './KpiQuickStats.js';
+export { KpiRating } from './KpiRating.js';
+export { KpiBeforeAfter } from './KpiBeforeAfter.js';
+export { KpiScroll } from './KpiScroll.js';

package/dist/components/dashboard/kpi/kpi-shell.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export type KpiAccent = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'tertiary' | 'secondary' | 'neutral';
+interface AccentStyles {
+    text: string;
+    bg: string;
+    bgHover: string;
+    iconText: string;
+    ring: string;
+    activeBg: string;
+    pillBg: string;
+}
+export declare const ACCENT_MAP: Record<KpiAccent, AccentStyles>;
+/** Shared interactive/themed props every KPI card can accept. */
+export interface KpiShellProps {
+    /** Accent color — drives tinted background, active ring, watermark tint. */
+    accent?: KpiAccent;
+    /** Active/selected state — adds a ring (use for filter-toggle cards). */
+    active?: boolean;
+    /** Click handler — makes the card a button. */
+    onClick?: () => void;
+    /** Loading skeleton. */
+    loading?: boolean;
+    /** Decorative watermark icon, faded in the bottom-right corner. */
+    watermarkIcon?: LucideIcon;
+    className?: string;
+    /** When true, uses a flat surface card (border + shadow) instead of an accent tint. */
+    surface?: boolean;
+    children?: ReactNode;
+}
+/**
+ * KpiShell — reusable card chrome for all KPI components.
+ * Owns: accent theming, active ring, click/loading states, watermark.
+ * KPI components render their content as children.
+ */
+export declare function KpiShell({ accent: accentKey, active, onClick, loading, watermarkIcon: Watermark, surface, className, children, }: KpiShellProps): import("react").JSX.Element;
+/**
+ * Standalone skeleton for KPI cards that don't render through KpiShell
+ * (KpiComparison, KpiBreakdown, KpiQuickStats). Matches the card chrome + pulse.
+ */
+export declare function KpiCardSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/dashboard/kpi/kpi-shell.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import { cn } from '../../../lib/utils.js';
+// Class strings must be fully static so Tailwind can detect them — no template literals.
+export const ACCENT_MAP = {
+    primary: {
+        text: 'text-[rgb(var(--color-primary))]',
+        bg: 'bg-[rgb(var(--color-primary))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-primary))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-primary))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-primary))]/40',
+        activeBg: 'bg-[rgb(var(--color-primary))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-primary))]/10',
+    },
+    success: {
+        text: 'text-[rgb(var(--color-success))]',
+        bg: 'bg-[rgb(var(--color-success))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-success))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-success))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-success))]/40',
+        activeBg: 'bg-[rgb(var(--color-success))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-success))]/10',
+    },
+    warning: {
+        text: 'text-[rgb(var(--color-warning))]',
+        bg: 'bg-[rgb(var(--color-warning))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-warning))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-warning))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-warning))]/40',
+        activeBg: 'bg-[rgb(var(--color-warning))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-warning))]/10',
+    },
+    error: {
+        text: 'text-[rgb(var(--color-error))]',
+        bg: 'bg-[rgb(var(--color-error))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-error))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-error))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-error))]/40',
+        activeBg: 'bg-[rgb(var(--color-error))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-error))]/10',
+    },
+    info: {
+        text: 'text-[rgb(var(--color-info))]',
+        bg: 'bg-[rgb(var(--color-info))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-info))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-info))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-info))]/40',
+        activeBg: 'bg-[rgb(var(--color-info))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-info))]/10',
+    },
+    tertiary: {
+        text: 'text-[rgb(var(--color-tertiary))]',
+        bg: 'bg-[rgb(var(--color-tertiary))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-tertiary))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-tertiary))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-tertiary))]/40',
+        activeBg: 'bg-[rgb(var(--color-tertiary))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-tertiary))]/10',
+    },
+    secondary: {
+        text: 'text-[rgb(var(--color-secondary))]',
+        bg: 'bg-[rgb(var(--color-secondary))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-secondary))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-secondary))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-secondary))]/40',
+        activeBg: 'bg-[rgb(var(--color-secondary))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-secondary))]/10',
+    },
+    neutral: {
+        text: 'text-[rgb(var(--fg-muted))]',
+        bg: 'bg-[rgb(var(--bg-surface))]',
+        bgHover: 'hover:bg-[rgb(var(--bg-subtle))]',
+        iconText: 'text-[rgb(var(--fg-muted))]/[0.07]',
+        ring: 'ring-[rgb(var(--bd-strong))]',
+        activeBg: 'bg-[rgb(var(--bg-subtle))]',
+        pillBg: 'bg-[rgb(var(--bg-subtle))]',
+    },
+};
+/**
+ * KpiShell — reusable card chrome for all KPI components.
+ * Owns: accent theming, active ring, click/loading states, watermark.
+ * KPI components render their content as children.
+ */
+export function KpiShell({ accent: accentKey = 'primary', active = false, onClick, loading = false, watermarkIcon: Watermark, surface = false, className, children, }) {
+    const a = ACCENT_MAP[accentKey];
+    const isInteractive = !!onClick;
+    const base = cn('w-full h-full relative overflow-hidden rounded-xl border transition-all text-left', surface
+        ? 'bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] shadow-sm'
+        : active
+            ? cn(a.activeBg, 'border-transparent ring-2', a.ring)
+            : cn(a.bg, isInteractive && a.bgHover, 'border-transparent'), isInteractive && 'cursor-pointer', className);
+    if (loading) {
+        return (_jsx("div", { className: base, children: _jsxs("div", { className: "relative z-10 space-y-2 animate-pulse p-4", children: [_jsx("div", { className: "h-2.5 w-14 rounded bg-[rgb(var(--bg-subtle))]" }), _jsx("div", { className: "h-7 w-10 rounded bg-[rgb(var(--bg-subtle))]" }), _jsx("div", { className: "h-2 w-20 rounded bg-[rgb(var(--bg-subtle))]" })] }) }));
+    }
+    const inner = (_jsxs(_Fragment, { children: [Watermark && (_jsx(Watermark, { className: cn('absolute -bottom-3 -right-3 w-20 h-20 pointer-events-none', a.iconText), strokeWidth: 1.2 })), _jsx("div", { className: "relative z-10 h-full", children: children })] }));
+    if (isInteractive) {
+        return (_jsx(motion.button, { type: "button", onClick: onClick, whileTap: { scale: 0.98 }, className: base, children: inner }));
+    }
+    return _jsx("div", { className: base, children: inner });
+}
+/**
+ * Standalone skeleton for KPI cards that don't render through KpiShell
+ * (KpiComparison, KpiBreakdown, KpiQuickStats). Matches the card chrome + pulse.
+ */
+export function KpiCardSkeleton({ className }) {
+    return (_jsx("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: _jsxs("div", { className: "space-y-3 animate-pulse", children: [_jsx("div", { className: "h-3 w-24 rounded bg-[rgb(var(--bg-subtle))]" }), _jsx("div", { className: "h-7 w-16 rounded bg-[rgb(var(--bg-subtle))]" }), _jsxs("div", { className: "space-y-2 pt-1", children: [_jsx("div", { className: "h-2.5 w-full rounded bg-[rgb(var(--bg-subtle))]" }), _jsx("div", { className: "h-2.5 w-5/6 rounded bg-[rgb(var(--bg-subtle))]" }), _jsx("div", { className: "h-2.5 w-2/3 rounded bg-[rgb(var(--bg-subtle))]" })] })] }) }));
+}

package/dist/components/dashboard/time-range.d.ts

@@ -0,0 +1,12 @@
+import type { TimeFilterSelection } from './FilterBar.js';
+export declare const getFiscalStartYear: (fyear?: string) => number;
+export declare const fiscalWeekRange: (fyStart: number, wk: number) => {
+    from: Date;
+    to: Date;
+} | null;
+export declare const fiscalWeekCount: (fyStart: number) => number;
+export declare const rangeFromSelection: (sel: TimeFilterSelection | undefined, fyStart: number) => {
+    from: Date;
+    to: Date;
+};
+export declare const buildContextLabel: (sel: TimeFilterSelection | undefined, fyStart: number, dateFrom: Date | undefined, dateTo: Date | undefined, t: (key: string) => string) => string;

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

@@ -0,0 +1,118 @@
+'use client';
+// Shared fiscal-year time helpers for all dashboards. FY runs 1 Apr (fyStart) → 31 Mar (fyStart+1).
+// Keeps range resolution + context labelling identical across sales/costing/management dashboards.
+export const getFiscalStartYear = (fyear) => {
+    const parsed = fyear ? parseInt(String(fyear).split('-')[0]) : NaN;
+    if (!isNaN(parsed))
+        return parsed;
+    const now = new Date();
+    return now.getMonth() >= 3 ? now.getFullYear() : now.getFullYear() - 1;
+};
+// Monday-aligned fiscal weeks, clamped to the FY (1 Apr fyStart → 31 Mar fyStart+1).
+// W1 starts on 1 Apr regardless of weekday (partial), then every W ends on Sunday and
+// the next starts Monday. The last week is clamped to 31 Mar. Returns null past FY end.
+export const fiscalWeekRange = (fyStart, wk) => {
+    const fyOpen = new Date(fyStart, 3, 1);
+    const fyClose = new Date(fyStart + 1, 2, 31);
+    // Sunday that ends W1 = the first Sunday on/after 1 Apr (day 0 = Sunday).
+    const firstSunday = new Date(fyStart, 3, 1 + ((7 - fyOpen.getDay()) % 7));
+    let from;
+    if (wk <= 1) {
+        from = fyOpen;
+    }
+    else {
+        // W2 starts the Monday after W1's Sunday; each later week is +7 days.
+        from = new Date(firstSunday.getFullYear(), firstSunday.getMonth(), firstSunday.getDate() + 1 + (wk - 2) * 7);
+    }
+    if (from > fyClose)
+        return null;
+    const sunday = wk <= 1 ? firstSunday : new Date(from.getFullYear(), from.getMonth(), from.getDate() + 6);
+    const to = sunday > fyClose ? fyClose : sunday;
+    return { from, to };
+};
+// Count of Monday-aligned fiscal weeks in the FY.
+export const fiscalWeekCount = (fyStart) => {
+    let wk = 1;
+    while (fiscalWeekRange(fyStart, wk + 1))
+        wk++;
+    return wk;
+};
+// "this" anchors to the FY's first period (W1 / Apr / Q1), per fiscal reporting.
+export const rangeFromSelection = (sel, fyStart) => {
+    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 (type === 'Week') {
+        const pick = sel?.weeks?.[0] || 'W1';
+        const wk = /^W\d+$/i.test(pick) ? parseInt(pick.slice(1)) : 1;
+        return 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 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 (picks.length > 0) {
+        const ranges = picks.map(monthRange);
+        return {
+            from: ranges.reduce((a, b) => (b.from < a.from ? b : a)).from,
+            to: ranges.reduce((a, b) => (b.to > a.to ? b : a)).to,
+        };
+    }
+    return monthRange(3);
+};
+// Header subtitle for the selected period. Week/Day show their day span in brackets;
+// Quarter/Year show fiscal labels. `t` translates the period words.
+export const buildContextLabel = (sel, fyStart, dateFrom, dateTo, t) => {
+    const range = rangeFromSelection(sel, fyStart);
+    const from = dateFrom || range.from;
+    const to = dateTo || range.to;
+    const fmtDay = (d) => d.toLocaleDateString('en-IN', { day: '2-digit', month: 'short' });
+    const fmtMon = (d) => d.toLocaleDateString('en-IN', { month: 'short', year: 'numeric' });
+    const dayRange = from.getTime() === to.getTime() ? fmtDay(from) : `${fmtDay(from)} – ${fmtDay(to)}`;
+    if (!dateFrom && !dateTo && sel?.type === 'Day') {
+        const dpick = sel.days?.[0];
+        const pick = dpick === 'yesterday' ? t('Yesterday') : dpick === 'last7' ? t('Last 7 Days') : dpick === 'last14' ? t('Last 14 Days') : dpick === 'last30' ? t('Last 30 Days') : t('Today');
+        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';
+        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';
+        return `${label} (${fmtMon(from)} – ${fmtMon(to)})`;
+    }
+    if (!dateFrom && !dateTo && sel?.type === 'Year') {
+        return `${t('FY')} ${fyStart}-${fyStart + 1}`;
+    }
+    const sameMonth = from.getFullYear() === to.getFullYear() && from.getMonth() === to.getMonth();
+    if (sameMonth)
+        return from.toLocaleDateString('en-IN', { month: 'long', year: 'numeric' });
+    return `${fmtMon(from)} – ${fmtMon(to)}`;
+};

package/dist/components/datagrid/DataGrid.d.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+import { ColumnDef, ColumnFiltersState, Row } from '@tanstack/react-table';
+export interface AdvancedCondition {
+    id: string;
+    column: string;
+    operator: string;
+    value: any;
+    type?: string;
+    connector?: 'AND' | 'OR';
+}
+export interface DataGridProps<TData> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    onRowClick?: (row: TData) => void;
+    onRowContextMenu?: (row: TData, event: React.MouseEvent) => void;
+    onRowSelect?: (selectedRows: TData[]) => void;
+    onImport?: (data: TData[]) => void;
+    selectedRowIds?: string[];
+    getRowId?: (row: TData) => string;
+    getRowProps?: (row: TData) => {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    enableViewToggle?: boolean;
+    viewMode?: 'all' | 'selected';
+    onViewModeChange?: (mode: 'all' | 'selected') => void;
+    enableVirtualization?: boolean;
+    enableColumnResizing?: boolean;
+    enableColumnReordering?: boolean;
+    enableColumnFreezing?: boolean;
+    frozenColumns?: string[];
+    rightFrozenColumns?: string[];
+    enableGrouping?: boolean;
+    groupByColumns?: string[];
+    onGroupingChange?: (grouping: string[]) => void;
+    enableExport?: boolean;
+    enableImport?: boolean;
+    enableVisualization?: boolean;
+    enableStickyActions?: boolean;
+    enableRowSelection?: boolean;
+    enableSorting?: boolean;
+    defaultSortBy?: string;
+    defaultSortOrder?: 'asc' | 'desc';
+    initialColumnVisibility?: Record<string, boolean>;
+    persistKey?: string;
+    enableSearch?: boolean;
+    enableFiltering?: boolean;
+    enableColumnVisibility?: boolean;
+    pageSize?: number;
+    stickyHeader?: boolean;
+    className?: string;
+    title?: React.ReactNode;
+    description?: string;
+    headerActions?: React.ReactNode;
+    headerActionsRight?: React.ReactNode;
+    /**
+     * Icon actions rendered inside the search pill, right of the actions (sliders) menu.
+     * Only rendered when searchType resolves to 'advanced' (the default) — the pill
+     * does not exist in the other search layouts.
+     */
+    toolbarActions?: React.ReactNode;
+    /**
+     * Reload handler. When provided, a refresh icon appears in the search pill next to
+     * the actions menu. May return a promise — the icon spins until it settles.
+     */
+    onRefresh?: () => void | Promise<unknown>;
+    /** External loading flag for the refresh icon (e.g. a React Query isFetching). */
+    isRefreshing?: boolean;
+    preToggleActions?: React.ReactNode;
+    loading?: boolean;
+    hideHeader?: boolean;
+    compactHeader?: boolean;
+    columnResizeMode?: 'onChange' | 'onEnd';
+    style?: React.CSSProperties;
+    compactMode?: boolean;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    rowHeight?: number;
+    mainColumns?: string;
+    enableBacchaSearch?: boolean;
+    searchType?: 'advanced' | 'new';
+    enablePagination?: boolean;
+    paginationPageSize?: number;
+    paginationPageSizeOptions?: number[];
+    circularCheckboxes?: boolean;
+    enableAutoResize?: boolean;
+    rowSelectionMode?: 'single' | 'multi';
+    enableRowClickSelection?: boolean;
+    enableCtrlClickMultiSelect?: boolean;
+    enableShiftClickRange?: boolean;
+    singleSelectionStyle?: 'radio' | 'highlight';
+    enableRowReordering?: boolean;
+    onRowOrderChange?: (reorderedData: TData[]) => void;
+    hideSelectionInSelectedView?: boolean;
+    renderSubComponent?: (row: Row<TData>) => React.ReactNode;
+    getRowCanExpand?: (row: Row<TData>) => boolean;
+    /** 'basic' = custom content in colSpan td, 'detailed' = real grid rows from subData */
+    expandMode?: 'basic' | 'detailed';
+    /** Return sub-data items for a row (used in detailed mode) */
+    getSubData?: (row: TData) => TData[];
+    /** Row ID accessor for sub-rows in detailed mode */
+    getSubRowId?: (row: TData) => string;
+    /** Callback when a sub-row is clicked in detailed mode */
+    onSubRowClick?: (item: TData) => void;
+    /** Callback when a sub-row is selected — propagates to parent for footer actions */
+    onSubRowSelect?: (item: TData) => void;
+    /** Auto-expand all expandable rows by default */
+    defaultExpandAll?: boolean;
+    enableDateFilter?: boolean;
+    dateFrom?: Date | null;
+    dateTo?: Date | null;
+    onDateFromChange?: (date: Date | null) => void;
+    onDateToChange?: (date: Date | null) => void;
+    /** Actions to render just before the date picker (left of date picker) */
+    preDateActions?: React.ReactNode;
+    enableSummary?: boolean;
+    summaryConfig?: import('./utils/grid-types.js').SummaryConfig<TData>;
+    enableFilterRow?: boolean;
+    /**
+     * Optional initial values for the column filter row. Seeded into state on mount and
+     * re-applied when the prop reference changes (so modals can pre-filter on open).
+     */
+    initialColumnFilters?: ColumnFiltersState;
+}
+export declare function DataGrid<TData>({ data, columns: initialColumns, onRowClick, onRowContextMenu, onRowSelect, onImport, selectedRowIds, getRowId, getRowProps, enableViewToggle, viewMode, onViewModeChange, enableVirtualization, enableColumnResizing, enableColumnReordering, enableColumnFreezing, frozenColumns, rightFrozenColumns, enableGrouping, groupByColumns, onGroupingChange, enableExport, enableImport, enableVisualization, enableStickyActions, enableRowSelection, enableSorting, defaultSortBy, defaultSortOrder, initialColumnVisibility, persistKey, enableSearch, enableFiltering, enableColumnVisibility, pageSize, stickyHeader, className, title, description, headerActions, headerActionsRight, toolbarActions, onRefresh, isRefreshing: isRefreshingProp, preToggleActions, loading, hideHeader, compactHeader, columnResizeMode, style, compactMode, minHeight, maxHeight, // Default: standard mode, responsive to screen height
+rowHeight, mainColumns, enableBacchaSearch, searchType, enablePagination, paginationPageSize, paginationPageSizeOptions, circularCheckboxes, enableAutoResize, rowSelectionMode, enableRowClickSelection, enableCtrlClickMultiSelect, enableShiftClickRange, singleSelectionStyle, enableRowReordering, onRowOrderChange, hideSelectionInSelectedView, renderSubComponent, getRowCanExpand, expandMode, getSubData, getSubRowId, onSubRowClick, onSubRowSelect, defaultExpandAll, enableDateFilter, preDateActions, enableSummary, summaryConfig, dateFrom, dateTo, onDateFromChange, onDateToChange, enableFilterRow, initialColumnFilters, }: DataGridProps<TData>): React.JSX.Element;