indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/datagrid/controls/menu/filter/AdvancedFilterModal.js

@@ -0,0 +1,405 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdvancedFilterModal = AdvancedFilterModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const modifiers_1 = require("@dnd-kit/modifiers");
+const utilities_1 = require("@dnd-kit/utilities");
+const ui_1 = require("../../../../ui/index.js");
+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 components_1 = require("../../../../index.js");
+const ui_6 = require("../../../../ui/index.js");
+const DatePicker_1 = require("../../../../forms/date-picker/DatePicker.js");
+const footer_1 = require("../../../../layout/footer.js");
+const LanguageContext_1 = require("../../../../../contexts/LanguageContext.js");
+// UI-only columns that must never appear as filterable / sortable data fields.
+const NON_DATA_COLUMN_IDS = new Set(['select', 'selection', 'actions', 'expand', 'drag']);
+// ─── Operators ─────────────────────────────────────────────────
+const STRING_OPERATORS = [
+    { value: 'contains', label: 'Contains' },
+    { value: 'not_contains', label: 'Does not contain' },
+    { value: 'equals', label: 'Equals' },
+    { value: 'not_equals', label: 'Does not equal' },
+    { value: 'starts_with', label: 'Starts with' },
+    { value: 'ends_with', label: 'Ends with' },
+    { value: 'is_empty', label: 'Is empty' },
+    { value: 'is_not_empty', label: 'Is not empty' },
+];
+const NUMBER_OPERATORS = [
+    { value: 'equals', label: 'Equals' },
+    { value: 'not_equals', label: 'Does not equal' },
+    { value: 'greater_than', label: 'Greater than' },
+    { value: 'greater_than_equal', label: 'Greater than or equal' },
+    { value: 'less_than', label: 'Less than' },
+    { value: 'less_than_equal', label: 'Less than or equal' },
+    { value: 'between', label: 'Between' },
+    { value: 'not_between', label: 'Not between' },
+];
+const DATE_OPERATORS = [
+    { value: 'equals', label: 'Equals' },
+    { value: 'not_equals', label: 'Does not equal' },
+    { value: 'before', label: 'Before' },
+    { value: 'after', label: 'After' },
+    { value: 'between', label: 'Between' },
+    { value: 'last_7_days', label: 'Last 7 days' },
+    { value: 'last_30_days', label: 'Last 30 days' },
+    { value: 'this_month', label: 'This month' },
+    { value: 'this_year', label: 'This year' },
+];
+const BOOLEAN_OPERATORS = [
+    { value: 'is_true', label: 'Is true' },
+    { value: 'is_false', label: 'Is false' },
+];
+// ─── Tab definitions ───────────────────────────────────────────
+const TABS = [
+    { id: 'filters', label: 'Filters', icon: lucide_react_1.ListFilter },
+    { id: 'columns', label: 'Columns', icon: lucide_react_1.Eye },
+    { id: 'sort', label: 'Sort', icon: lucide_react_1.ArrowUpDown },
+];
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPONENT
+// ═══════════════════════════════════════════════════════════════
+function AdvancedFilterModal({ isOpen, onClose, onApply, columns, data, table, sorting = [], onSortingChange, enableGrouping = false, grouping = [], onGroupingChange, onClearGrouping, initialTab = 'filters', }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
+    const [filters, setFilters] = (0, react_1.useState)([]);
+    const [matchType, setMatchType] = (0, react_1.useState)('all');
+    // Reset tab when modal opens
+    react_1.default.useEffect(() => {
+        if (isOpen)
+            setActiveTab(initialTab);
+    }, [isOpen, initialTab]);
+    // ─── Filterable columns ──────────────────────────────────────
+    const filterableColumns = (0, react_1.useMemo)(() => {
+        return columns
+            .filter((col) => {
+            // Exclude UI-only columns (selection checkbox, actions, expand toggle) — they
+            // hold no data to filter on and shouldn't appear as filterable fields.
+            const id = col.accessorKey || col.id;
+            if (NON_DATA_COLUMN_IDS.has(id))
+                return false;
+            return !!id;
+        })
+            .map((col) => {
+            const key = col.accessorKey || col.id;
+            const sampleValues = data.slice(0, 100).map(row => row[key]).filter(val => val != null);
+            let type = 'string';
+            if (sampleValues.length > 0) {
+                const firstValue = sampleValues[0];
+                if (typeof firstValue === 'boolean')
+                    type = 'boolean';
+                else if (typeof firstValue === 'number')
+                    type = 'number';
+                else if (firstValue instanceof Date || (typeof firstValue === 'string' && !isNaN(Date.parse(firstValue))))
+                    type = 'date';
+            }
+            const uniqueValues = [...new Set(sampleValues.map(val => String(val)))].sort();
+            let label = key;
+            if (typeof col.header === 'string')
+                label = col.header;
+            return { key, label, type, uniqueValues: uniqueValues.slice(0, 50) };
+        });
+    }, [columns, data]);
+    // ─── Sortable columns from table ─────────────────────────────
+    const sortableColumns = (0, react_1.useMemo)(() => {
+        if (!table)
+            return filterableColumns.map(c => ({ id: c.key, label: c.label }));
+        return table.getAllColumns()
+            .filter(col => col.getCanSort() && !NON_DATA_COLUMN_IDS.has(col.id))
+            .map(col => {
+            let label = col.id;
+            if (typeof col.columnDef.header === 'string')
+                label = col.columnDef.header;
+            return { id: col.id, label };
+        });
+    }, [table, filterableColumns]);
+    // ─── Hideable columns from table ─────────────────────────────
+    const hideableColumns = (0, react_1.useMemo)(() => {
+        if (!table)
+            return [];
+        return table.getAllColumns()
+            .filter(col => col.getCanHide() && !NON_DATA_COLUMN_IDS.has(col.id))
+            .map(col => {
+            let label = col.id;
+            if (typeof col.columnDef.header === 'string')
+                label = col.columnDef.header;
+            return { id: col.id, label, visible: col.getIsVisible() };
+        });
+    }, [table, table?.getState().columnVisibility]);
+    // ─── Groupable columns ───────────────────────────────────────
+    const groupableColumns = (0, react_1.useMemo)(() => {
+        if (!table || !enableGrouping)
+            return [];
+        return table.getAllColumns()
+            .filter(col => !NON_DATA_COLUMN_IDS.has(col.id) && col.getCanGroup?.() !== false)
+            .map(col => {
+            let label = col.id;
+            if (typeof col.columnDef.header === 'string')
+                label = col.columnDef.header;
+            return { id: col.id, label };
+        });
+    }, [table, enableGrouping]);
+    // ─── Filter handlers ─────────────────────────────────────────
+    const addFilter = () => {
+        setFilters([...filters, {
+                id: Date.now().toString(),
+                column: filterableColumns[0]?.key || '',
+                operator: 'contains',
+                value: '',
+                type: filterableColumns[0]?.type || 'string',
+            }]);
+    };
+    const removeFilter = (filterId) => setFilters(filters.filter(f => f.id !== filterId));
+    const updateFilter = (filterId, updates) => setFilters(filters.map(f => f.id === filterId ? { ...f, ...updates } : f));
+    const getOperators = (type) => {
+        switch (type) {
+            case 'number': return NUMBER_OPERATORS;
+            case 'date': return DATE_OPERATORS;
+            case 'boolean': return BOOLEAN_OPERATORS;
+            default: return STRING_OPERATORS;
+        }
+    };
+    // ─── Sort handlers ────────────────────────────────────────────
+    const handleSort = (columnId) => {
+        if (!onSortingChange)
+            return;
+        const existing = sorting.find(s => s.id === columnId);
+        if (existing) {
+            if (existing.desc) {
+                // desc → remove
+                onSortingChange(sorting.filter(s => s.id !== columnId));
+            }
+            else {
+                // asc → desc
+                onSortingChange(sorting.map(s => s.id === columnId ? { ...s, desc: true } : s));
+            }
+        }
+        else {
+            // append so the drag-ordered sort priority is preserved
+            onSortingChange([...sorting, { id: columnId, desc: false }]);
+        }
+    };
+    const clearSort = () => onSortingChange?.([]);
+    const reorderSorting = (from, to) => {
+        if (!onSortingChange)
+            return;
+        onSortingChange((0, sortable_1.arrayMove)(sorting, from, to));
+    };
+    // ─── Render value input ───────────────────────────────────────
+    const renderValueInput = (filter) => {
+        const columnInfo = filterableColumns.find(col => col.key === filter.column);
+        if (!columnInfo)
+            return null;
+        if (['is_empty', 'is_not_empty', 'is_true', 'is_false', 'last_7_days', 'last_30_days', 'this_month', 'this_year'].includes(filter.operator)) {
+            return null;
+        }
+        switch (filter.type) {
+            case 'boolean':
+                return ((0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: [{ value: 'true', label: 'True' }, { value: 'false', label: 'False' }], value: filter.value?.toString(), onValueChange: (value) => updateFilter(filter.id, { value: value === 'true' }), placeholder: t('Select value') }));
+            case 'number':
+                if (['between', 'not_between'].includes(filter.operator)) {
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_4.Input, { type: "number", placeholder: "Min", value: filter.value?.min || '', onChange: (e) => updateFilter(filter.id, { value: { ...filter.value, min: parseFloat(e.target.value) } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))] text-xs", children: "to" }), (0, jsx_runtime_1.jsx)(ui_4.Input, { type: "number", placeholder: "Max", value: filter.value?.max || '', onChange: (e) => updateFilter(filter.id, { value: { ...filter.value, max: parseFloat(e.target.value) } }) })] }));
+                }
+                return (0, jsx_runtime_1.jsx)(ui_4.Input, { type: "number", placeholder: t('Enter value'), value: filter.value || '', onChange: (e) => updateFilter(filter.id, { value: parseFloat(e.target.value) }) });
+            case 'date':
+                if (filter.operator === 'between') {
+                    return (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { mode: "range", value: filter.value || {}, onChange: (range) => updateFilter(filter.id, { value: range }), placeholder: t('Select date range...'), showFromTo: true });
+                }
+                return (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { mode: "single", value: filter.value ? new Date(filter.value) : undefined, onChange: (date) => updateFilter(filter.id, { value: date }), placeholder: t('Select date...') });
+            default:
+                if (columnInfo.uniqueValues.length <= 20 && columnInfo.uniqueValues.length > 2) {
+                    return ((0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: columnInfo.uniqueValues.map(v => ({ value: v, label: v })), value: Array.isArray(filter.value) ? filter.value[0] || '' : filter.value || '', onValueChange: (value) => updateFilter(filter.id, { value }), placeholder: t('Select value...') }));
+                }
+                return (0, jsx_runtime_1.jsx)(ui_4.Input, { type: "text", placeholder: t('Enter value'), value: filter.value || '', onChange: (e) => updateFilter(filter.id, { value: e.target.value }) });
+        }
+    };
+    // ═══════════════════════════════════════════════════════════════
+    // RENDER
+    // ═══════════════════════════════════════════════════════════════
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: isOpen, onOpenChange: onClose, children: (0, jsx_runtime_1.jsxs)(ui_1.DialogContent, { className: "max-w-4xl h-[100dvh] sm:h-[80vh] sm:max-h-[720px] flex flex-col p-0 bg-[rgb(var(--bg-surface))] overflow-hidden border-0 shadow-2xl", hideCloseButton: true, children: [(0, jsx_runtime_1.jsx)(ui_1.DialogTitle, { className: "sr-only", children: t('Table Settings') }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-shrink-0 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] flex items-center justify-between gap-3 px-3 sm:px-4 py-2.5", children: [(0, jsx_runtime_1.jsx)(ui_3.Tabs, { tabs: TABS.map(tab => {
+                                const count = tab.id === 'filters' ? filters.length
+                                    : tab.id === 'sort' ? sorting.length
+                                        : tab.id === 'columns' ? hideableColumns.filter(c => !c.visible).length
+                                            : 0;
+                                return {
+                                    id: tab.id,
+                                    label: count > 0 ? `${t(tab.label)} (${count})` : t(tab.label),
+                                    icon: tab.icon,
+                                };
+                            }), activeTab: activeTab, onTabChange: (id) => setActiveTab(id), variant: "pill", size: "md" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "close-btn-md flex-shrink-0", "aria-label": t('Close'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [activeTab === 'filters' && ((0, jsx_runtime_1.jsx)(FiltersTab, { filters: filters, setFilters: setFilters, matchType: matchType, setMatchType: setMatchType, filterableColumns: filterableColumns, addFilter: addFilter, removeFilter: removeFilter, updateFilter: updateFilter, getOperators: getOperators, renderValueInput: renderValueInput, t: t })), activeTab === 'columns' && ((0, jsx_runtime_1.jsx)(ColumnsTab, { hideableColumns: hideableColumns, table: table, enableGrouping: enableGrouping, groupableColumns: groupableColumns, grouping: grouping, onGroupingChange: onGroupingChange, onClearGrouping: onClearGrouping, t: t })), activeTab === 'sort' && ((0, jsx_runtime_1.jsx)(SortTab, { sortableColumns: sortableColumns, sorting: sorting, handleSort: handleSort, clearSort: clearSort, reorderSorting: reorderSorting, t: t }))] }), activeTab === 'filters' && ((0, jsx_runtime_1.jsx)(footer_1.Footer, { variant: "modal", gradient: true, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "action-cancel", onClick: onClose, icon: lucide_react_1.XCircle, children: t('Cancel') }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: "action-apply", icon: lucide_react_1.Check, onClick: () => onApply(filters.map((f, i) => ({
+                                    ...f,
+                                    // First condition has no connector; the rest default to the global match type.
+                                    connector: i === 0 ? undefined : (f.connector || (matchType === 'any' ? 'OR' : 'AND')),
+                                }))), disabled: filters.length === 0, children: [t('Apply Filters'), " (", filters.length, ")"] })] }) })), activeTab !== 'filters' && ((0, jsx_runtime_1.jsx)(footer_1.Footer, { variant: "modal", gradient: true, actions: (0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "action-apply", icon: lucide_react_1.Check, onClick: onClose, children: t('Apply') }) }))] }) }));
+}
+// ═══════════════════════════════════════════════════════════════
+// FILTERS TAB
+// ═══════════════════════════════════════════════════════════════
+function FiltersTab({ filters, setFilters, matchType, setMatchType, filterableColumns, addFilter, removeFilter, updateFilter, getOperators, renderValueInput, t, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "px-4 sm:px-6 pt-3 pb-4 space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider", children: t('Quick Add') }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-subtle))]", children: t('Click column to add filter') })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-2", children: filterableColumns.slice(0, 12).map((col) => {
+                            const isActive = filters.some((f) => f.column === col.key);
+                            return ((0, jsx_runtime_1.jsx)(ui_2.Button, { variant: isActive ? 'primary' : 'outline', size: "sm", onClick: () => {
+                                    if (!isActive) {
+                                        setFilters([...filters, {
+                                                id: Date.now().toString(),
+                                                column: col.key,
+                                                operator: col.type === 'string' ? 'contains' : 'equals',
+                                                value: '',
+                                                type: col.type,
+                                            }]);
+                                    }
+                                }, className: `justify-start text-xs h-8 px-2.5 font-medium ${isActive ? 'opacity-50 cursor-not-allowed' : ''}`, disabled: isActive, children: (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: col.label }) }, col.key));
+                        }) })] }), (0, jsx_runtime_1.jsx)(ui_6.Separator, {}), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider", children: [t('Conditions'), filters.length > 0 ? ` (${filters.length})` : ''] }), filters.length > 1 && ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-medium text-[rgb(var(--fg-subtle))] uppercase", children: t('Match') }), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex rounded-md border border-[rgb(var(--bd-default))] overflow-hidden text-[10px] font-bold", children: [
+                                                    { id: 'all', label: t('ALL'), connector: 'AND' },
+                                                    { id: 'any', label: t('ANY'), connector: 'OR' },
+                                                ].map((opt) => {
+                                                    const isActive = matchType === opt.id;
+                                                    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                                                            setMatchType(opt.id);
+                                                            setFilters(filters.map((f) => ({ ...f, connector: opt.connector })));
+                                                        }, "aria-pressed": isActive, className: `px-2 py-0.5 transition-colors ${isActive
+                                                            ? 'bg-[rgb(var(--color-primary))] text-white'
+                                                            : 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))]'}`, children: opt.label }, opt.id));
+                                                }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [filters.length > 0 && ((0, jsx_runtime_1.jsxs)(ui_2.Button, { onClick: () => setFilters([]), size: "sm", variant: "ghost", className: "h-8 text-xs font-medium text-[rgb(var(--color-error))] hover:bg-[rgb(var(--color-error))]/10", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "h-3.5 w-3.5 mr-1" }), t('Clear all')] })), (0, jsx_runtime_1.jsxs)(ui_2.Button, { onClick: addFilter, size: "sm", variant: "outline", className: "h-8 text-xs font-medium", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "h-4 w-4 mr-1" }), t('Add')] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2.5", children: filters.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-8 px-4 border-2 border-dashed border-[rgb(var(--bd-default))] rounded-lg bg-[rgb(var(--bg-subtle))]", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: t('No filters added') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-subtle))] mt-1", children: t('Use Quick Add above or click "Add"') })] })) : (filters.map((filter, index) => ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, x: -20 }, transition: { duration: 0.2 }, className: "flex flex-col sm:grid sm:grid-cols-12 gap-2 sm:gap-2.5 p-3 border border-[rgb(var(--bd-default))] rounded-md bg-[rgb(var(--bg-surface))] hover:border-[rgb(var(--bd-hover))] transition-all", children: [(0, jsx_runtime_1.jsx)("div", { className: "hidden sm:flex col-span-1 items-center justify-center", children: index > 0 ? ((0, jsx_runtime_1.jsx)(ConnectorToggle, { value: filter.connector || (matchType === 'any' ? 'OR' : 'AND'), onChange: (c) => updateFilter(filter.id, { connector: c }), t: t })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-medium text-[rgb(var(--fg-subtle))] uppercase", children: t('Where') })) }), index > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "sm:hidden", children: (0, jsx_runtime_1.jsx)(ConnectorToggle, { value: filter.connector || (matchType === 'any' ? 'OR' : 'AND'), onChange: (c) => updateFilter(filter.id, { connector: c }), t: t }) })), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-4", children: [(0, jsx_runtime_1.jsx)(ui_5.Label, { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-1", children: t('Column') }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: filterableColumns.map((col) => ({ value: col.key, label: col.label })), value: filter.column, onValueChange: (value) => {
+                                                const columnValue = typeof value === 'string' ? value : value[0] || '';
+                                                const columnInfo = filterableColumns.find((col) => col.key === columnValue);
+                                                updateFilter(filter.id, { column: columnValue, type: columnInfo?.type || 'string', operator: 'contains', value: '' });
+                                            }, placeholder: t('Select column') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-3", children: [(0, jsx_runtime_1.jsx)(ui_5.Label, { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-1", children: t('Operator') }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: getOperators(filter.type), value: filter.operator, onValueChange: (value) => updateFilter(filter.id, { operator: typeof value === 'string' ? value : value[0] || '', value: '' }), placeholder: t('Select') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-3", children: [(0, jsx_runtime_1.jsx)(ui_5.Label, { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-1", children: t('Value') }), renderValueInput(filter)] }), (0, jsx_runtime_1.jsx)("div", { className: "sm:col-span-1 flex sm:items-end sm:justify-center sm:pb-1", children: (0, jsx_runtime_1.jsx)(ui_2.Button, { variant: "ghost", size: "sm", onClick: () => removeFilter(filter.id), className: "h-8 w-8 p-0 text-[rgb(var(--color-error))] hover:bg-[rgb(var(--color-error))]/10 transition-colors", "aria-label": t('Remove filter'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "h-4 w-4" }) }) })] }, filter.id)))) })] })] }));
+}
+// Per-condition AND/OR toggle: a tiny two-segment pill.
+function ConnectorToggle({ value, onChange, t }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "inline-flex rounded-md border border-[rgb(var(--bd-default))] overflow-hidden text-[10px] font-bold", children: ['AND', 'OR'].map((c) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onChange(c), className: `px-1.5 py-0.5 transition-colors ${value === c
+                ? 'bg-[rgb(var(--color-primary))] text-white'
+                : 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))]'}`, children: t(c) }, c))) }));
+}
+// ═══════════════════════════════════════════════════════════════
+// COLUMNS TAB (Parkbuddy-inspired)
+// ═══════════════════════════════════════════════════════════════
+function ColumnsTab({ hideableColumns, table, enableGrouping, groupableColumns, grouping, onGroupingChange, onClearGrouping, t, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "px-4 sm:px-6 pt-3 pb-4 space-y-4", children: [table && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2 mb-2", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { className: "h-3.5 w-3.5" }), t('Columns'), (0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] font-bold bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] px-1.5 py-0.5 rounded-full normal-case tracking-normal", children: [hideableColumns.filter((c) => c.visible).length, "/", hideableColumns.length] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => table.toggleAllColumnsVisible(true), className: "text-xs text-[rgb(var(--color-primary))] hover:underline font-medium", children: t('Show All') }), (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-subtle))]", children: "|" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => table.toggleAllColumnsVisible(false), className: "text-xs text-[rgb(var(--fg-muted))] hover:underline font-medium", children: t('Hide All') })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-[rgb(var(--fg-muted))] mb-2", children: t('Drag to reorder. The number is the column sequence in the grid.') }), (0, jsx_runtime_1.jsx)(ColumnOrderVisibilityList, { table: table, hideableColumns: hideableColumns, t: t })] })), enableGrouping && groupableColumns.length > 0 && onGroupingChange && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_6.Separator, {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Layers, { className: "h-3.5 w-3.5" }), t('Group By'), grouping.length > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-bold bg-[rgb(var(--color-primary))] text-white px-1.5 py-0.5 rounded-full", children: grouping.length }))] }), grouping.length > 0 && onClearGrouping && ((0, jsx_runtime_1.jsx)("button", { onClick: onClearGrouping, className: "text-xs text-[rgb(var(--color-error))] hover:underline font-medium", children: t('Clear') }))] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-2", children: groupableColumns.map((col) => {
+                                    const isGrouped = grouping.includes(col.id);
+                                    return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onGroupingChange(col.id), className: `px-3 py-2 text-xs rounded-md border flex items-center gap-2 transition-colors ${isGrouped
+                                            ? 'bg-[rgb(var(--color-primary))]/10 text-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]/30'
+                                            : 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]/5'}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Layers, { className: "h-3 w-3 flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: col.label }), isGrouped && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3 w-3 ml-auto flex-shrink-0" })] }, col.id));
+                                }) })] })] }))] }));
+}
+// ─── Merged column order + visibility list ─────────────────────
+function ColumnOrderVisibilityList({ table, hideableColumns, t }) {
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, { activationConstraint: { distance: 4 } }), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+    const columnOrder = table.getState().columnOrder;
+    const allColumns = table.getAllColumns();
+    const hideableIds = (0, react_1.useMemo)(() => new Set(hideableColumns.map((c) => c.id)), [hideableColumns]);
+    const orderedIds = (0, react_1.useMemo)(() => {
+        const base = columnOrder.length > 0 ? columnOrder : allColumns.map((c) => c.id);
+        const dataIds = base.filter((id) => !NON_DATA_COLUMN_IDS.has(id));
+        // A column missing from a stale columnOrder would otherwise be unreachable in this list.
+        const missing = allColumns
+            .map((c) => c.id)
+            .filter((id) => !NON_DATA_COLUMN_IDS.has(id) && !dataIds.includes(id));
+        return [...dataIds, ...missing];
+    }, [columnOrder, allColumns]);
+    const commitOrder = (nextDataIds) => {
+        const base = columnOrder.length > 0 ? columnOrder : allColumns.map((c) => c.id);
+        const leading = base.filter((id) => NON_DATA_COLUMN_IDS.has(id) && id !== 'actions');
+        const trailing = base.filter((id) => id === 'actions');
+        table.setColumnOrder([...leading, ...nextDataIds, ...trailing]);
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const from = orderedIds.indexOf(active.id);
+        const to = orderedIds.indexOf(over.id);
+        if (from === -1 || to === -1)
+            return;
+        commitOrder((0, sortable_1.arrayMove)(orderedIds, from, to));
+    };
+    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToParentElement], onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: orderedIds, strategy: sortable_1.rectSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-2 content-start", children: orderedIds.map((columnId, index) => {
+                    const col = allColumns.find((c) => c.id === columnId);
+                    if (!col)
+                        return null;
+                    let label = col.id;
+                    if (typeof col.columnDef.header === 'string')
+                        label = col.columnDef.header;
+                    return ((0, jsx_runtime_1.jsx)(SortableColumnRow, { id: columnId, label: label, seq: index + 1, isVisible: col.getIsVisible(), canHide: hideableIds.has(columnId), onToggleVisibility: () => col.toggleVisibility(), t: t }, columnId));
+                }) }) }) }));
+}
+function SortableColumnRow({ id, label, seq, isVisible, canHide, onToggleVisibility, t, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({ id });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setNodeRef, style: { transform: utilities_1.CSS.Transform.toString(transform), transition }, className: `flex items-center gap-1.5 px-2 py-2 text-xs rounded-md border transition-colors ${isDragging
+            ? 'relative z-10 shadow-lg border-[rgb(var(--color-primary))] bg-[rgb(var(--bg-surface))]'
+            : isVisible
+                ? 'bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))]'
+                : 'bg-[rgb(var(--bg-subtle))] border-[rgb(var(--bd-default))]'}`, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "p-1 rounded cursor-grab active:cursor-grabbing text-[rgb(var(--fg-subtle))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] touch-none flex-shrink-0", "aria-label": t('Drag to reorder'), ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { className: "h-3.5 w-3.5" }) }), (0, jsx_runtime_1.jsx)("span", { className: "w-5 text-right tabular-nums text-[rgb(var(--fg-subtle))] flex-shrink-0", children: seq }), (0, jsx_runtime_1.jsx)("span", { className: `truncate flex-1 ${isVisible ? 'text-[rgb(var(--fg-default))]' : 'text-[rgb(var(--fg-muted))]'}`, children: label }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onToggleVisibility, disabled: !canHide, "aria-pressed": isVisible, "aria-label": isVisible ? t('Hide column') : t('Show column'), className: `p-1.5 rounded transition-colors flex-shrink-0 ${!canHide
+                    ? 'opacity-30 cursor-not-allowed text-[rgb(var(--fg-muted))]'
+                    : isVisible
+                        ? 'text-[rgb(var(--color-success))] hover:bg-[rgb(var(--color-success))]/10'
+                        : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))]'}`, children: isVisible ? (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { className: "h-3.5 w-3.5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { className: "h-3.5 w-3.5" }) })] }));
+}
+// ═══════════════════════════════════════════════════════════════
+// SORT TAB (Parkbuddy-inspired)
+// ═══════════════════════════════════════════════════════════════
+function SortTab({ sortableColumns, sorting, handleSort, clearSort, reorderSorting, t }) {
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, { activationConstraint: { distance: 4 } }), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+    const activeIds = sorting.map((s) => s.id);
+    const inactiveColumns = sortableColumns.filter((c) => !activeIds.includes(c.id));
+    const labelFor = (id) => sortableColumns.find((c) => c.id === id)?.label || id;
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const from = activeIds.indexOf(active.id);
+        const to = activeIds.indexOf(over.id);
+        if (from === -1 || to === -1)
+            return;
+        reorderSorting(from, to);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "px-4 sm:px-6 pt-3 pb-4 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2 mb-2", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { className: "h-3.5 w-3.5" }), t('Sort By'), sorting.length > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-bold bg-[rgb(var(--color-primary))] text-white px-1.5 py-0.5 rounded-full normal-case tracking-normal", children: sorting.length }))] }), sorting.length > 0 && ((0, jsx_runtime_1.jsx)("button", { onClick: clearSort, className: "text-xs text-[rgb(var(--color-error))] hover:underline font-medium", children: t('Clear') }))] }), sorting.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-[rgb(var(--fg-muted))] mb-2", children: t('Drag to reorder. The number is the sort priority.') }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToParentElement], onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: activeIds, strategy: sortable_1.rectSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-2 content-start", children: sorting.map((s, index) => ((0, jsx_runtime_1.jsx)(SortableSortRow, { id: s.id, label: labelFor(s.id), seq: index + 1, desc: s.desc, onToggleDirection: () => handleSort(s.id), t: t }, s.id))) }) }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-6 border-2 border-dashed border-[rgb(var(--bd-default))] rounded-lg bg-[rgb(var(--bg-subtle))]", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: t('No sorting applied') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-subtle))] mt-1", children: t('Tap a column to sort') })] }))] }), inactiveColumns.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_6.Separator, {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "h-3.5 w-3.5" }), t('Add Sort Column')] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-2 content-start", children: inactiveColumns.map((col) => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSort(col.id), className: "px-3 py-2 text-xs rounded-md border text-left flex items-center gap-1.5 transition-colors bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]/5", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "h-3 w-3 flex-shrink-0 text-[rgb(var(--fg-subtle))]" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: col.label })] }, col.id))) })] })] }))] }));
+}
+function SortableSortRow({ id, label, seq, desc, onToggleDirection, t, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({ id });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setNodeRef, style: { transform: utilities_1.CSS.Transform.toString(transform), transition }, className: `flex items-center gap-1.5 px-2 py-2 text-xs rounded-md border transition-colors ${isDragging
+            ? 'relative z-10 shadow-lg border-[rgb(var(--color-primary))] bg-[rgb(var(--bg-surface))]'
+            : 'bg-[rgb(var(--color-primary))]/10 border-[rgb(var(--color-primary))]/30'}`, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "p-1 rounded cursor-grab active:cursor-grabbing text-[rgb(var(--fg-subtle))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] touch-none flex-shrink-0", "aria-label": t('Drag to reorder'), ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { className: "h-3.5 w-3.5" }) }), (0, jsx_runtime_1.jsx)("span", { className: "w-5 text-right tabular-nums text-[rgb(var(--fg-subtle))] flex-shrink-0", children: seq }), (0, jsx_runtime_1.jsx)("span", { className: "truncate flex-1 font-semibold text-[rgb(var(--color-primary))]", children: label }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onToggleDirection, "aria-label": desc ? t('Sort descending') : t('Sort ascending'), className: "px-1.5 py-1 rounded text-[10px] font-bold flex-shrink-0 text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]/15 transition-colors", children: desc ? '↓ Z-A' : '↑ A-Z' })] }));
+}

package/dist/cjs/components/datagrid/controls/menu/filter/FilterSection.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterSection = FilterSection;
+function FilterSection({ enableDateFilter = false, dateFrom, dateTo, onDateFromChange, onDateToChange, enableFiltering = true, onOpenAdvancedFilter, activeFiltersCount = 0 }) {
+    // Date Filter and Advanced Filters removed from menu
+    // These features are still available via DataGrid props but not shown in ActionsMenu
+    return null;
+}

package/dist/cjs/components/datagrid/controls/menu/grouping/GroupingSection.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupingSection = GroupingSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../../../../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+function GroupingSection({ columns, grouping, onGroupingChange, onClearGrouping, }) {
+    // Filter columns that can be grouped (exclude select, actions, etc.)
+    const groupableColumns = columns.filter((col) => col.id !== 'select' &&
+        col.id !== 'actions' &&
+        col.id !== 'expand' &&
+        col.getCanGroup?.() !== false);
+    if (groupableColumns.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubTrigger, { className: "cursor-pointer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Layers, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Group By" }), grouping.length > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "ml-auto text-xs bg-[rgb(var(--color-primary))] text-white px-1.5 py-0.5 rounded", children: grouping.length }))] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubContent, { className: "w-48", children: [groupableColumns.map((column) => {
+                                const isGrouped = grouping.includes(column.id);
+                                const header = typeof column.columnDef.header === 'string'
+                                    ? column.columnDef.header
+                                    : column.id;
+                                return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: isGrouped, onCheckedChange: () => onGroupingChange(column.id), className: "cursor-pointer", children: header }, column.id));
+                            }), grouping.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: onClearGrouping, className: "cursor-pointer text-[rgb(var(--color-danger))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "mr-2 h-4 w-4" }), "Clear Grouping"] })] }))] })] })] }));
+}

package/dist/cjs/components/datagrid/controls/menu/grouping/index.js

@@ -0,0 +1,6 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupingSection = void 0;
+var GroupingSection_1 = require("./GroupingSection.js");
+Object.defineProperty(exports, "GroupingSection", { enumerable: true, get: function () { return GroupingSection_1.GroupingSection; } });

package/dist/cjs/components/datagrid/controls/menu/import/ImportSection.js

@@ -0,0 +1,75 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportSection = ImportSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+const ui_1 = require("../../../../ui/index.js");
+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 ui_6 = require("../../../../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+const import_1 = require("./import.js");
+function ImportSection({ onImport }) {
+    const [showImportDialog, setShowImportDialog] = (0, react_1.useState)(false);
+    const [isImporting, setIsImporting] = (0, react_1.useState)(false);
+    const [importResult, setImportResult] = (0, react_1.useState)(null);
+    const [uploadProgress, setUploadProgress] = (0, react_1.useState)(0);
+    const fileInputRef = (0, react_1.useRef)(null);
+    // Handle file import
+    const handleFileImport = async (file) => {
+        setIsImporting(true);
+        setUploadProgress(0);
+        setImportResult(null);
+        // Simulate progress
+        const progressInterval = setInterval(() => {
+            setUploadProgress(prev => {
+                if (prev >= 90) {
+                    clearInterval(progressInterval);
+                    return 90;
+                }
+                return prev + 10;
+            });
+        }, 100);
+        try {
+            const result = await (0, import_1.importData)(file, (progress) => {
+                clearInterval(progressInterval);
+                setUploadProgress(progress);
+            });
+            setImportResult(result);
+        }
+        catch (error) {
+            console.error('❌ [DataGrid Import] Import failed:', error);
+            setImportResult({
+                success: false,
+                data: [],
+                errors: [error.message],
+                warnings: [],
+                totalRows: 0,
+                validRows: 0,
+            });
+        }
+        setIsImporting(false);
+    };
+    const handleImportConfirm = () => {
+        if (importResult && importResult.data.length > 0) {
+            onImport(importResult.data);
+            setShowImportDialog(false);
+            setImportResult(null);
+        }
+    };
+    const handleImportCancel = () => {
+        setShowImportDialog(false);
+        setImportResult(null);
+        setIsImporting(false);
+        setUploadProgress(0);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => setShowImportDialog(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Import Data" })] }), (0, jsx_runtime_1.jsx)(ui_2.Dialog, { open: showImportDialog, onOpenChange: setShowImportDialog, children: (0, jsx_runtime_1.jsxs)(ui_2.DialogContent, { className: "max-w-2xl bg-[rgb(var(--bg-surface))]", children: [(0, jsx_runtime_1.jsx)(ui_2.DialogHeader, { children: (0, jsx_runtime_1.jsxs)(ui_2.DialogTitle, { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { children: "Import Data" }), (0, jsx_runtime_1.jsx)(ui_6.Button, { variant: "ghost", size: "sm", onClick: handleImportCancel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [!importResult && !isImporting && ((0, jsx_runtime_1.jsxs)(ui_3.Card, { children: [(0, jsx_runtime_1.jsx)(ui_3.CardHeader, { children: (0, jsx_runtime_1.jsx)(ui_3.CardTitle, { className: "text-lg", children: "Select File" }) }), (0, jsx_runtime_1.jsx)(ui_3.CardContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center w-full", children: (0, jsx_runtime_1.jsxs)("label", { className: "flex flex-col items-center justify-center w-full h-32 border-2 border-[rgb(var(--bd-default))] border-dashed rounded-lg cursor-pointer bg-[rgb(var(--bg-muted))] hover:bg-[rgb(var(--bg-hover))]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center pt-5 pb-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "w-8 h-8 mb-4 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsxs)("p", { className: "mb-2 text-sm text-[rgb(var(--fg-default))]", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold", children: "Click to upload" }), " or drag and drop"] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "CSV, Excel, or JSON files" })] }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", className: "hidden", accept: ".csv,.xlsx,.xls,.json", onChange: (e) => {
+                                                                        const file = e.target.files?.[0];
+                                                                        if (file)
+                                                                            handleFileImport(file);
+                                                                    } })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-4 text-center text-xs text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center space-x-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "CSV" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center space-x-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileSpreadsheet, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Excel" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center space-x-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.File, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "JSON" })] })] })] }) })] })), isImporting && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, children: (0, jsx_runtime_1.jsx)(ui_3.Card, { children: (0, jsx_runtime_1.jsx)(ui_3.CardContent, { className: "pt-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "h-8 w-8 mx-auto mb-4 text-[rgb(var(--color-primary))] animate-bounce" }), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium", children: "Processing file..." }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: "Please wait while we import your data" })] }), (0, jsx_runtime_1.jsx)(ui_4.Progress, { value: uploadProgress, className: "w-full" })] }) }) }) })), importResult && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, children: (0, jsx_runtime_1.jsxs)(ui_3.Card, { children: [(0, jsx_runtime_1.jsx)(ui_3.CardHeader, { children: (0, jsx_runtime_1.jsxs)(ui_3.CardTitle, { className: "flex items-center space-x-2", children: [importResult.success ? ((0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "h-5 w-5 text-green-500" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-5 w-5 text-red-500" })), (0, jsx_runtime_1.jsx)("span", { children: "Import Results" })] }) }), (0, jsx_runtime_1.jsx)(ui_3.CardContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4 text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600 dark:text-blue-400", children: importResult.totalRows }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-blue-600 dark:text-blue-400", children: "Total Rows" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-green-50 dark:bg-green-900/20 rounded-lg", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-600 dark:text-green-400", children: importResult.validRows }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-green-600 dark:text-green-400", children: "Valid Rows" })] })] }), importResult.errors.length > 0 && ((0, jsx_runtime_1.jsxs)(ui_5.Alert, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsxs)(ui_5.AlertDescription, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium mb-2", children: "Errors found:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-sm space-y-1", children: [importResult.errors.slice(0, 5).map((error, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "text-red-600 dark:text-red-400", children: ["\u2022 ", error] }, index))), importResult.errors.length > 5 && ((0, jsx_runtime_1.jsxs)("li", { className: "text-[rgb(var(--fg-muted))]", children: ["... and ", importResult.errors.length - 5, " more errors"] }))] })] })] })), importResult.warnings.length > 0 && ((0, jsx_runtime_1.jsxs)(ui_5.Alert, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsxs)(ui_5.AlertDescription, { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium mb-2", children: "Warnings:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-sm space-y-1", children: [importResult.warnings.slice(0, 3).map((warning, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "text-yellow-600 dark:text-yellow-400", children: ["\u2022 ", warning] }, index))), importResult.warnings.length > 3 && ((0, jsx_runtime_1.jsxs)("li", { className: "text-[rgb(var(--fg-muted))]", children: ["... and ", importResult.warnings.length - 3, " more warnings"] }))] })] })] }))] }) })] }) }))] }), importResult && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end space-x-2 pt-4 border-t border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)(ui_6.Button, { variant: "outline", onClick: handleImportCancel, children: "Cancel" }), (0, jsx_runtime_1.jsxs)(ui_6.Button, { onClick: handleImportConfirm, disabled: importResult.validRows === 0, children: ["Import ", importResult.validRows, " Records"] })] }))] }) })] }));
+}