@issonujha/sdui-web 0.1.3 → 0.1.5

package/dist/cjs/DynamicTable.js

@@ -0,0 +1,856 @@
+"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.DynamicTable = DynamicTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const STAGE_PALETTES = [
+    { color: '#6366F1', bg: '#EEF2FF', text: '#4338CA', border: '#C7D2FE' }, // Indigo
+    { color: '#F59E0B', bg: '#FEF3C7', text: '#B45309', border: '#FDE68A' }, // Amber
+    { color: '#3B82F6', bg: '#EFF6FF', text: '#1D4ED8', border: '#BFDBFE' }, // Blue
+    { color: '#10B981', bg: '#D1FAE5', text: '#047857', border: '#A7F3D0' }, // Emerald
+    { color: '#EF4444', bg: '#FEE2E2', text: '#B91C1C', border: '#FECACA' }, // Red
+    { color: '#8B5CF6', bg: '#EDE9FE', text: '#6D28D9', border: '#DDD6FE' }, // Purple
+    { color: '#EC4899', bg: '#FCE7F3', text: '#BE185D', border: '#FBCFE8' }, // Pink
+    { color: '#14B8A6', bg: '#CCFBF1', text: '#0F766E', border: '#99F6E4' }, // Teal
+];
+function formatStageLabel(code) {
+    if (!code)
+        return '';
+    return code
+        .replace(/[_-]+/g, ' ')
+        .toLowerCase()
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function normalizeStageDef(raw, index = 0) {
+    const key = String(raw.key || raw.code || raw.id || '').toUpperCase();
+    const label = raw.label || raw.name || formatStageLabel(key);
+    const palette = STAGE_PALETTES[index % STAGE_PALETTES.length];
+    return {
+        key,
+        label,
+        color: raw.color || palette.color,
+        textColor: raw.textColor || palette.text,
+        borderColor: raw.borderColor || palette.border,
+        statuses: Array.isArray(raw.statuses) && raw.statuses.length > 0 ? raw.statuses : [key],
+    };
+}
+function getRowStage(row, stageKey) {
+    if (!row)
+        return '';
+    const r = row;
+    const val = (stageKey && r[stageKey]) || r.deliveryStatus || r.stageCode || r.stageName || r.status || r.stage || '';
+    return String(val).toUpperCase();
+}
+function getBadgeStyle(val) {
+    const s = String(val || '').toUpperCase();
+    if (['ACTIVE', 'APPROVED', 'SUCCESS', 'DELIVERED', 'PAID', 'COMPLETED', 'OPEN', 'TRUE'].includes(s)) {
+        return { bg: '#ECFDF5', text: '#065F46', border: '#A7F3D0' };
+    }
+    if (['PENDING', 'PROCESSING', 'IN_TRANSIT', 'PLACED', 'ACCEPTED', 'PACKED', 'DISPATCHED', 'WARN', 'WARNING'].includes(s)) {
+        return { bg: '#FFFBEB', text: '#92400E', border: '#FDE68A' };
+    }
+    if (['CANCELLED', 'REJECTED', 'FAILED', 'SUSPENDED', 'BLOCKED', 'BANNED', 'ERROR', 'FALSE'].includes(s)) {
+        return { bg: '#FEF2F2', text: '#991B1B', border: '#FECACA' };
+    }
+    if (['SIMULATED', 'INFO', 'SELLER', 'WEB', 'EMAIL', 'SMS', 'IN_APP'].includes(s)) {
+        return { bg: '#EFF6FF', text: '#1E40AF', border: '#BFDBFE' };
+    }
+    if (s.includes('OTP') || s.includes('SECURITY')) {
+        return { bg: '#FAF5FF', text: '#6B21A8', border: '#E9D5FF' };
+    }
+    return { bg: '#F1F5F9', text: '#334155', border: '#E2E8F0' };
+}
+function DynamicTable({ data: rawData, columns: customColumns, filters: customFilters, loading = false, error = null, userRoles = [], viewMode: controlledViewMode, onViewModeChange, availableViews: propAvailableViews, kanbanStages: explicitKanbanStages, stageKey, canDragRecord = true, onTransitionStage, onPageChange, onRowsPerPageChange, onSortChange, onFilterChange, onSearchChange, onSearch, searchValue: controlledSearchValue, onRowClick, onExportCsv, onRefresh, title, subtitle, pageSizeOptions = [10, 15, 25, 50, 100], defaultRowsPerPage = 10, renderCustomCard, actions, rowActions, renderExpandedRow, activeFilters, emptyMessage, exportFilename, tableActions, extraHeaderActions, compact = false, enableExport, enableLiveReload, defaultLiveReload, showGlobalFilters, }) {
+    // Normalize incoming data (can be DataTableResponse or Array)
+    const isResponseObject = Boolean(rawData && typeof rawData === 'object' && !Array.isArray(rawData));
+    const normalizedData = (0, react_1.useMemo)(() => {
+        if (isResponseObject) {
+            const resp = rawData;
+            return {
+                content: Array.isArray(resp.content) ? resp.content : [],
+                totalElements: typeof resp.totalElements === 'number' ? resp.totalElements : (resp.content?.length || 0),
+                totalPages: typeof resp.totalPages === 'number' ? resp.totalPages : 1,
+                pageNumber: typeof resp.pageNumber === 'number' ? resp.pageNumber : 0,
+                pageSize: typeof resp.pageSize === 'number' ? resp.pageSize : defaultRowsPerPage,
+                last: typeof resp.last === 'boolean' ? resp.last : true,
+                columns: Array.isArray(resp.columns) ? resp.columns : [],
+                filters: Array.isArray(resp.filters) ? resp.filters : [],
+                sortBy: resp.sortBy,
+                sortDir: resp.sortDir,
+                stages: resp.stages,
+                enableExport: typeof enableExport === 'boolean' ? enableExport : resp.enableExport,
+                enableLiveReload: typeof enableLiveReload === 'boolean' ? enableLiveReload : resp.enableLiveReload,
+                enableColumnVisibility: resp.enableColumnVisibility,
+            };
+        }
+        const arr = Array.isArray(rawData) ? rawData : [];
+        return {
+            content: arr,
+            totalElements: arr.length,
+            totalPages: 1,
+            pageNumber: 0,
+            pageSize: arr.length || defaultRowsPerPage,
+            last: true,
+            columns: [],
+            filters: [],
+            enableExport: typeof enableExport === 'boolean' ? enableExport : true,
+            enableLiveReload: typeof enableLiveReload === 'boolean' ? enableLiveReload : true,
+        };
+    }, [rawData, isResponseObject, defaultRowsPerPage, enableExport, enableLiveReload]);
+    // Dynamic View Mode
+    const [internalViewMode, setInternalViewMode] = (0, react_1.useState)('table');
+    const activeView = controlledViewMode ?? internalViewMode;
+    const setViewMode = (mode) => {
+        setInternalViewMode(mode);
+        onViewModeChange?.(mode);
+    };
+    // Search state
+    const [internalSearch, setInternalSearch] = (0, react_1.useState)('');
+    const activeSearch = controlledSearchValue !== undefined ? controlledSearchValue : internalSearch;
+    const handleSearchInput = (val) => {
+        setInternalSearch(val);
+        onSearchChange?.(val);
+        onSearch?.(val);
+    };
+    // Filter drawer / panel state
+    const [filterDrawerOpen, setFilterDrawerOpen] = (0, react_1.useState)(false);
+    const [filterDrawerSearch, setFilterDrawerSearch] = (0, react_1.useState)('');
+    const [internalFilters, setInternalFilters] = (0, react_1.useState)({});
+    const effectiveFilters = (0, react_1.useMemo)(() => {
+        return activeFilters !== undefined ? activeFilters : internalFilters;
+    }, [activeFilters, internalFilters]);
+    const [hiddenColumns, setHiddenColumns] = (0, react_1.useState)(new Set());
+    // Columns resolution
+    const columns = (0, react_1.useMemo)(() => {
+        let base = customColumns && customColumns.length > 0
+            ? customColumns
+            : normalizedData.columns && normalizedData.columns.length > 0
+                ? normalizedData.columns
+                : [];
+        if (base.length === 0 && normalizedData.content.length > 0) {
+            const sample = normalizedData.content[0];
+            base = Object.keys(sample).slice(0, 8).map((k) => ({
+                key: k,
+                label: formatStageLabel(k),
+                type: typeof sample[k] === 'number' ? 'number' : 'text',
+                sortable: true,
+            }));
+        }
+        return base.filter((c) => !c.rolesAllowed || c.rolesAllowed.length === 0 || c.rolesAllowed.some((r) => userRoles.includes(r)));
+    }, [customColumns, normalizedData.columns, normalizedData.content, userRoles]);
+    const visibleColumns = (0, react_1.useMemo)(() => {
+        return columns.filter((c) => !hiddenColumns.has(c.key));
+    }, [columns, hiddenColumns]);
+    // Filters resolution
+    const filters = (0, react_1.useMemo)(() => {
+        const base = customFilters && customFilters.length > 0 ? customFilters : normalizedData.filters || [];
+        return base.filter((f) => !f.rolesAllowed || f.rolesAllowed.length === 0 || f.rolesAllowed.some((r) => userRoles.includes(r)));
+    }, [customFilters, normalizedData.filters, userRoles]);
+    // Dynamic Kanban Stages
+    const kanbanStages = (0, react_1.useMemo)(() => {
+        if (explicitKanbanStages && explicitKanbanStages.length > 0) {
+            return explicitKanbanStages.map((s, i) => normalizeStageDef(s, i));
+        }
+        if (Array.isArray(normalizedData.stages) && normalizedData.stages.length > 0) {
+            return normalizedData.stages.map((s, i) => normalizeStageDef(s, i));
+        }
+        // Derive dynamically from content
+        const stageMap = new Map();
+        const ordered = [];
+        normalizedData.content.forEach((item) => {
+            const key = getRowStage(item, stageKey);
+            if (key && !stageMap.has(key)) {
+                const label = item.stageName || formatStageLabel(key);
+                stageMap.set(key, { label });
+                ordered.push(key);
+            }
+        });
+        if (ordered.length === 0) {
+            return [normalizeStageDef({ key: 'DEFAULT', label: 'All Records' }, 0)];
+        }
+        return ordered.map((k, idx) => {
+            const info = stageMap.get(k);
+            return normalizeStageDef({ key: k, label: info.label }, idx);
+        });
+    }, [explicitKanbanStages, normalizedData.stages, normalizedData.content, stageKey]);
+    // Available Views
+    const availableViews = (0, react_1.useMemo)(() => {
+        if (propAvailableViews && propAvailableViews.length > 0) {
+            return propAvailableViews;
+        }
+        return ['table', 'kanban', 'cards'];
+    }, [propAvailableViews]);
+    // Drag and drop state for Kanban
+    const [draggedItem, setDraggedItem] = (0, react_1.useState)(null);
+    const [dragOverCol, setDragOverCol] = (0, react_1.useState)(null);
+    const isDraggable = (row) => {
+        if (typeof canDragRecord === 'function')
+            return canDragRecord(row);
+        return Boolean(canDragRecord);
+    };
+    const handleDragStart = (e, item) => {
+        setDraggedItem(item);
+        e.dataTransfer.setData('text/plain', String(item.id ?? ''));
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDragOver = (e, colKey) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        if (dragOverCol !== colKey)
+            setDragOverCol(colKey);
+    };
+    const handleDrop = async (e, colKey) => {
+        e.preventDefault();
+        setDragOverCol(null);
+        if (!draggedItem)
+            return;
+        const currentStage = getRowStage(draggedItem, stageKey);
+        if (currentStage !== colKey && onTransitionStage) {
+            await onTransitionStage(draggedItem, colKey);
+        }
+        setDraggedItem(null);
+    };
+    // Export CSV
+    const handleExport = () => {
+        if (onExportCsv) {
+            onExportCsv();
+            return;
+        }
+        if (!normalizedData.content || normalizedData.content.length === 0)
+            return;
+        const headers = visibleColumns.map((c) => c.label || c.header || c.key);
+        const rows = normalizedData.content.map((row) => visibleColumns.map((c) => {
+            const v = typeof c.accessor === 'function'
+                ? c.accessor(row)
+                : row[c.key];
+            return typeof v === 'object' ? JSON.stringify(v) : String(v ?? '');
+        }));
+        const csvContent = 'data:text/csv;charset=utf-8,' +
+            [headers.join(','), ...rows.map((r) => r.map((cell) => `"${cell.replace(/"/g, '""')}"`).join(','))].join('\n');
+        const encodedUri = encodeURI(csvContent);
+        const link = document.createElement('a');
+        link.setAttribute('href', encodedUri);
+        link.setAttribute('download', `${exportFilename || title || 'export'}_${Date.now()}.csv`);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    // Active filter count
+    const activeFiltersCount = Object.keys(effectiveFilters).filter((k) => effectiveFilters[k] !== '' && effectiveFilters[k] !== null && effectiveFilters[k] !== undefined).length;
+    // Filter drawer toggle column
+    const toggleColumnVisibility = (key) => {
+        setHiddenColumns((prev) => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    // Render cell content based on ColumnDef
+    const renderCellContent = (row, column) => {
+        if (typeof column.render === 'function') {
+            const cellVal = typeof column.accessor === 'function'
+                ? column.accessor(row)
+                : row[column.key];
+            return column.render(cellVal, row);
+        }
+        const val = typeof column.accessor === 'function'
+            ? column.accessor(row)
+            : row[column.key];
+        const type = String(column.type || '').toLowerCase();
+        const keyLower = String(column.key || '').toLowerCase();
+        if (val === null || val === undefined || val === '') {
+            return (0, jsx_runtime_1.jsx)("span", { style: { color: '#94A3B8' }, children: "\u2014" });
+        }
+        if (type === 'badge' || keyLower === 'status' || keyLower === 'role' || keyLower.includes('stage')) {
+            const badgeStyle = getBadgeStyle(String(val));
+            return ((0, jsx_runtime_1.jsx)("span", { style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    padding: '3px 9px',
+                    borderRadius: 9999,
+                    fontSize: '0.72rem',
+                    fontWeight: 700,
+                    backgroundColor: badgeStyle.bg,
+                    color: badgeStyle.text,
+                    border: `1px solid ${badgeStyle.border}`,
+                    letterSpacing: '0.01em',
+                    textTransform: 'capitalize',
+                }, children: String(val).replace(/_/g, ' ') }));
+        }
+        if (type === 'money' || keyLower.includes('amount') || keyLower.includes('price') || keyLower.includes('total')) {
+            const num = Number(val);
+            const symbol = column.currency === 'USD' ? '$' : '₹';
+            return ((0, jsx_runtime_1.jsxs)("span", { style: { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace', fontWeight: 800, color: '#0F172A' }, children: [symbol, isNaN(num) ? String(val) : num.toLocaleString('en-IN')] }));
+        }
+        if (type === 'date' || keyLower.includes('date') || keyLower.includes('at') || keyLower === 'timestamp') {
+            const d = new Date(val);
+            if (!isNaN(d.getTime())) {
+                return ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.78rem', color: '#475569' }, children: d.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' }) }));
+            }
+        }
+        if (type === 'image' || keyLower.includes('avatar') || keyLower.includes('logo')) {
+            const src = String(val);
+            if (src.startsWith('http') || src.startsWith('/')) {
+                return ((0, jsx_runtime_1.jsx)("img", { src: src, alt: "thumbnail", style: { width: 32, height: 32, borderRadius: 8, objectFit: 'cover', border: '1px solid #E2E8F0' } }));
+            }
+        }
+        return ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.82rem', color: '#1E293B', fontWeight: 500 }, children: String(val) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "sdui-dynamic-table-root", style: {
+            width: '100%',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+            fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "sdui-dt-header", style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap: 12,
+                    padding: '14px 18px',
+                    background: 'var(--surface-card, #FFFFFF)',
+                    borderRadius: 16,
+                    border: '1px solid var(--border-subtle, #E2E8F0)',
+                    boxShadow: '0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.02)',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { minWidth: 200 }, children: [title && ((0, jsx_runtime_1.jsx)("h2", { style: { margin: 0, fontSize: '1.18rem', fontWeight: 800, color: 'var(--text-main, #0F172A)', letterSpacing: '-0.02em' }, children: title })), subtitle && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 3, fontSize: '0.78rem', color: 'var(--text-muted, #64748B)', fontWeight: 500 }, children: [subtitle, normalizedData.totalElements > 0 && ((0, jsx_runtime_1.jsxs)("span", { children: [" \u00B7 ", (0, jsx_runtime_1.jsx)("strong", { style: { color: 'var(--color-primary, #6366F1)' }, children: normalizedData.totalElements.toLocaleString() }), " records"] }))] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    background: 'var(--surface-subtle, #F8FAFC)',
+                                    border: '1px solid var(--border-subtle, #E2E8F0)',
+                                    borderRadius: 10,
+                                    padding: '4px 10px',
+                                    gap: 6,
+                                    minWidth: 180,
+                                }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.82rem', color: '#94A3B8' }, children: "\uD83D\uDD0D" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search records\u2026", value: activeSearch, onChange: (e) => handleSearchInput(e.target.value), style: {
+                                            border: 'none',
+                                            background: 'transparent',
+                                            outline: 'none',
+                                            fontSize: '0.8rem',
+                                            color: '#0F172A',
+                                            width: '100%',
+                                        } }), activeSearch && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleSearchInput(''), style: {
+                                            border: 'none',
+                                            background: 'transparent',
+                                            cursor: 'pointer',
+                                            color: '#94A3B8',
+                                            fontSize: '0.82rem',
+                                            padding: 0,
+                                        }, children: "\u2715" }))] }), availableViews.length > 1 && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'inline-flex',
+                                    background: 'var(--surface-subtle, #F8FAFC)',
+                                    border: '1px solid var(--border-subtle, #E2E8F0)',
+                                    borderRadius: 10,
+                                    padding: 3,
+                                    gap: 2,
+                                }, children: [availableViews.includes('table') && ((0, jsx_runtime_1.jsxs)("button", { type: "button", title: "Table View", onClick: () => setViewMode('table'), style: {
+                                            padding: '5px 11px',
+                                            borderRadius: 7,
+                                            border: 'none',
+                                            fontSize: '0.78rem',
+                                            fontWeight: 700,
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 5,
+                                            backgroundColor: activeView === 'table' ? 'var(--surface-card, #FFFFFF)' : 'transparent',
+                                            color: activeView === 'table' ? 'var(--color-primary, #6366F1)' : '#64748B',
+                                            boxShadow: activeView === 'table' ? '0 1px 3px rgba(15, 23, 42, 0.08)' : 'none',
+                                            transition: 'all 0.15s ease',
+                                        }, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2630" }), (0, jsx_runtime_1.jsx)("span", { children: "Table" })] })), availableViews.includes('kanban') && ((0, jsx_runtime_1.jsxs)("button", { type: "button", title: "Kanban Board", onClick: () => setViewMode('kanban'), style: {
+                                            padding: '5px 11px',
+                                            borderRadius: 7,
+                                            border: 'none',
+                                            fontSize: '0.78rem',
+                                            fontWeight: 700,
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 5,
+                                            backgroundColor: activeView === 'kanban' ? 'var(--surface-card, #FFFFFF)' : 'transparent',
+                                            color: activeView === 'kanban' ? 'var(--color-primary, #6366F1)' : '#64748B',
+                                            boxShadow: activeView === 'kanban' ? '0 1px 3px rgba(15, 23, 42, 0.08)' : 'none',
+                                            transition: 'all 0.15s ease',
+                                        }, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u229E" }), (0, jsx_runtime_1.jsx)("span", { children: "Kanban" })] })), availableViews.includes('cards') && ((0, jsx_runtime_1.jsxs)("button", { type: "button", title: "Cards Grid", onClick: () => setViewMode('cards'), style: {
+                                            padding: '5px 11px',
+                                            borderRadius: 7,
+                                            border: 'none',
+                                            fontSize: '0.78rem',
+                                            fontWeight: 700,
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 5,
+                                            backgroundColor: activeView === 'cards' ? 'var(--surface-card, #FFFFFF)' : 'transparent',
+                                            color: activeView === 'cards' ? 'var(--color-primary, #6366F1)' : '#64748B',
+                                            boxShadow: activeView === 'cards' ? '0 1px 3px rgba(15, 23, 42, 0.08)' : 'none',
+                                            transition: 'all 0.15s ease',
+                                        }, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u25A6" }), (0, jsx_runtime_1.jsx)("span", { children: "Cards" })] }))] })), onRefresh && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onRefresh, title: "Refresh Records", style: {
+                                    padding: '6px 12px',
+                                    borderRadius: 10,
+                                    border: '1px solid var(--border-subtle, #E2E8F0)',
+                                    background: 'var(--surface-card, #FFFFFF)',
+                                    fontSize: '0.78rem',
+                                    fontWeight: 700,
+                                    color: '#475569',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 5,
+                                }, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u21BB" }), (0, jsx_runtime_1.jsx)("span", { children: "Refresh" })] })), normalizedData.enableExport !== false && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleExport, title: "Export Records CSV", style: {
+                                    padding: '6px 12px',
+                                    borderRadius: 10,
+                                    border: '1px solid var(--border-subtle, #E2E8F0)',
+                                    background: 'var(--surface-card, #FFFFFF)',
+                                    fontSize: '0.78rem',
+                                    fontWeight: 700,
+                                    color: '#475569',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 5,
+                                }, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2B73" }), (0, jsx_runtime_1.jsx)("span", { children: "Export" })] })), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setFilterDrawerOpen(true), style: {
+                                    padding: '6px 14px',
+                                    borderRadius: 10,
+                                    border: `1px solid ${activeFiltersCount > 0 ? 'var(--color-primary, #6366F1)' : 'var(--border-subtle, #E2E8F0)'}`,
+                                    background: activeFiltersCount > 0 ? 'rgba(99, 102, 241, 0.08)' : 'var(--surface-card, #FFFFFF)',
+                                    color: activeFiltersCount > 0 ? 'var(--color-primary, #6366F1)' : '#0F172A',
+                                    fontSize: '0.78rem',
+                                    fontWeight: 700,
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                }, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2699" }), (0, jsx_runtime_1.jsx)("span", { children: "Filters & Columns" }), activeFiltersCount > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                            background: 'var(--color-primary, #6366F1)',
+                                            color: '#FFFFFF',
+                                            borderRadius: 9999,
+                                            fontSize: '0.65rem',
+                                            fontWeight: 800,
+                                            padding: '1px 6px',
+                                        }, children: activeFiltersCount }))] }), extraHeaderActions, tableActions] })] }), filterDrawerOpen && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: 'rgba(15, 23, 42, 0.3)',
+                    backdropFilter: 'blur(3px)',
+                    zIndex: 9999,
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                }, onClick: () => setFilterDrawerOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        width: 380,
+                        maxWidth: '90vw',
+                        height: '100%',
+                        backgroundColor: '#FFFFFF',
+                        boxShadow: '-8px 0 32px rgba(15, 23, 42, 0.16)',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxSizing: 'border-box',
+                    }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                padding: '16px 20px',
+                                borderBottom: '1px solid #E2E8F0',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: 0, fontSize: '1rem', fontWeight: 800, color: '#0F172A' }, children: "Filters & Columns" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '0.74rem', color: '#64748B', marginTop: 2 }, children: [visibleColumns.length, " of ", columns.length, " columns visible"] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setFilterDrawerOpen(false), style: {
+                                        border: 'none',
+                                        background: 'transparent',
+                                        cursor: 'pointer',
+                                        fontSize: '1.2rem',
+                                        color: '#64748B',
+                                    }, children: "\u2715" })] }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '12px 20px', borderBottom: '1px solid #E2E8F0' }, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Find a column or filter\u2026", value: filterDrawerSearch, onChange: (e) => setFilterDrawerSearch(e.target.value), style: {
+                                    width: '100%',
+                                    padding: '8px 12px',
+                                    borderRadius: 8,
+                                    border: '1px solid #CBD5E1',
+                                    fontSize: '0.8rem',
+                                    outline: 'none',
+                                    boxSizing: 'border-box',
+                                } }) }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: '16px 20px', flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.7rem', fontWeight: 800, color: '#94A3B8', letterSpacing: '0.06em', textTransform: 'uppercase' }, children: "Columns & Active Dimensions" }), columns
+                                    .filter((c) => !filterDrawerSearch || c.label.toLowerCase().includes(filterDrawerSearch.toLowerCase()))
+                                    .map((col) => {
+                                    const isVisible = !hiddenColumns.has(col.key);
+                                    const boundFilter = filters.find((f) => f.key === col.key || f.columnKey === col.key);
+                                    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            padding: '10px 12px',
+                                            borderRadius: 10,
+                                            border: '1px solid #E2E8F0',
+                                            backgroundColor: isVisible ? '#FFFFFF' : '#F8FAFC',
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: '0.82rem', fontWeight: 700, color: isVisible ? '#0F172A' : '#94A3B8' }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isVisible, onChange: () => toggleColumnVisibility(col.key), style: { cursor: 'pointer' } }), (0, jsx_runtime_1.jsx)("span", { children: col.label })] }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.68rem', fontWeight: 600, color: '#94A3B8', textTransform: 'uppercase' }, children: col.type || 'text' })] }), boundFilter && isVisible && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 8, paddingTop: 8, borderTop: '1px dashed #E2E8F0' }, children: boundFilter.type === 'SELECT' ? ((0, jsx_runtime_1.jsxs)("select", { value: String(effectiveFilters[boundFilter.key] || ''), onChange: (e) => {
+                                                        const next = { ...effectiveFilters, [boundFilter.key]: e.target.value };
+                                                        if (!e.target.value)
+                                                            delete next[boundFilter.key];
+                                                        setInternalFilters(next);
+                                                        onFilterChange?.(next);
+                                                    }, style: {
+                                                        width: '100%',
+                                                        padding: '6px 8px',
+                                                        borderRadius: 6,
+                                                        border: '1px solid #CBD5E1',
+                                                        fontSize: '0.78rem',
+                                                        color: '#0F172A',
+                                                        backgroundColor: '#FFFFFF',
+                                                    }, children: [(0, jsx_runtime_1.jsxs)("option", { value: "", children: ["All ", boundFilter.label] }), (boundFilter.options || []).map((opt) => ((0, jsx_runtime_1.jsx)("option", { value: String(opt.value), children: opt.label }, String(opt.value))))] })) : ((0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: `Filter by ${boundFilter.label}…`, value: String(effectiveFilters[boundFilter.key] || ''), onChange: (e) => {
+                                                        const next = { ...effectiveFilters, [boundFilter.key]: e.target.value };
+                                                        if (!e.target.value)
+                                                            delete next[boundFilter.key];
+                                                        setInternalFilters(next);
+                                                        onFilterChange?.(next);
+                                                    }, style: {
+                                                        width: '100%',
+                                                        padding: '6px 8px',
+                                                        borderRadius: 6,
+                                                        border: '1px solid #CBD5E1',
+                                                        fontSize: '0.78rem',
+                                                        boxSizing: 'border-box',
+                                                    } })) }))] }, col.key));
+                                })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                padding: '14px 20px',
+                                borderTop: '1px solid #E2E8F0',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                backgroundColor: '#F8FAFC',
+                            }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                                        setInternalFilters({});
+                                        setHiddenColumns(new Set());
+                                        onFilterChange?.({});
+                                    }, style: {
+                                        border: 'none',
+                                        background: 'transparent',
+                                        color: '#EF4444',
+                                        fontSize: '0.78rem',
+                                        fontWeight: 700,
+                                        cursor: 'pointer',
+                                    }, children: "Clear all filters" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setFilterDrawerOpen(false), style: {
+                                        padding: '7px 18px',
+                                        borderRadius: 8,
+                                        border: 'none',
+                                        background: 'var(--color-primary, #6366F1)',
+                                        color: '#FFFFFF',
+                                        fontSize: '0.8rem',
+                                        fontWeight: 700,
+                                        cursor: 'pointer',
+                                    }, children: "Done" })] })] }) })), error && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: '12px 16px',
+                    borderRadius: 12,
+                    backgroundColor: '#FEF2F2',
+                    border: '1px solid #FECACA',
+                    color: '#B91C1C',
+                    fontSize: '0.84rem',
+                    fontWeight: 600,
+                }, children: error })), activeView === 'table' && ((0, jsx_runtime_1.jsx)("div", { className: "sdui-dt-surface", style: {
+                    width: '100%',
+                    overflowX: 'auto',
+                    background: 'var(--surface-card, #FFFFFF)',
+                    borderRadius: 16,
+                    border: '1px solid var(--border-subtle, #E2E8F0)',
+                    boxShadow: '0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.02)',
+                }, children: (0, jsx_runtime_1.jsxs)("table", { style: { width: '100%', borderCollapse: 'collapse', textAlign: 'left', fontSize: '0.82rem' }, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { style: { background: 'var(--surface-subtle, #F8FAFC)', borderBottom: '1px solid var(--border-subtle, #E2E8F0)' }, children: [visibleColumns.map((col) => {
+                                        const isSorted = normalizedData.sortBy === col.key;
+                                        const sortDir = normalizedData.sortDir?.toLowerCase();
+                                        return ((0, jsx_runtime_1.jsx)("th", { style: {
+                                                padding: compact ? '8px 12px' : '12px 16px',
+                                                fontWeight: 700,
+                                                color: '#475569',
+                                                fontSize: '0.74rem',
+                                                letterSpacing: '0.04em',
+                                                textTransform: 'uppercase',
+                                                textAlign: col.align || 'left',
+                                                cursor: col.sortable !== false ? 'pointer' : 'default',
+                                                userSelect: 'none',
+                                                whiteSpace: 'nowrap',
+                                            }, onClick: () => col.sortable !== false && onSortChange?.(col.key, sortDir === 'asc' ? 'desc' : 'asc'), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [(0, jsx_runtime_1.jsx)("span", { children: col.label || col.header || col.key }), col.sortable !== false && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.7rem', color: isSorted ? 'var(--color-primary, #6366F1)' : '#CBD5E1' }, children: isSorted ? (sortDir === 'desc' ? '▼' : '▲') : '⇅' }))] }) }, col.key));
+                                    }), Boolean(actions || rowActions) && ((0, jsx_runtime_1.jsx)("th", { style: {
+                                            padding: compact ? '8px 12px' : '12px 16px',
+                                            fontWeight: 800,
+                                            color: '#475569',
+                                            fontSize: '0.74rem',
+                                            letterSpacing: '0.04em',
+                                            textTransform: 'uppercase',
+                                            textAlign: 'right',
+                                        }, children: "Actions" }))] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: loading ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { colSpan: visibleColumns.length + (actions || rowActions ? 1 : 0), style: { padding: 48, textAlign: 'center', color: '#64748B' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '1.2rem', marginBottom: 6 }, children: "\u23F3" }), (0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600 }, children: "Loading records\u2026" })] }) })) : normalizedData.content.length === 0 ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { colSpan: visibleColumns.length + (actions || rowActions ? 1 : 0), style: { padding: 48, textAlign: 'center', color: '#64748B' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '1.4rem', marginBottom: 6 }, children: "\uD83D\uDCED" }), (0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 700, color: '#0F172A', marginBottom: 2 }, children: emptyMessage || 'No records found' }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.76rem' }, children: "Try clearing filters or search terms" })] }) })) : (normalizedData.content.map((row, idx) => {
+                                const rowId = row.id || idx;
+                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { onClick: (e) => {
+                                                const target = e.target;
+                                                if (target.closest('button') || target.closest('a') || target.closest('select'))
+                                                    return;
+                                                onRowClick?.(row);
+                                            }, style: {
+                                                borderBottom: '1px solid #F1F5F9',
+                                                cursor: onRowClick ? 'pointer' : 'default',
+                                                transition: 'background-color 0.15s ease',
+                                            }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = 'rgba(99, 102, 241, 0.04)'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'transparent'), children: [visibleColumns.map((col) => ((0, jsx_runtime_1.jsx)("td", { style: {
+                                                        padding: compact ? '8px 12px' : '12px 16px',
+                                                        textAlign: col.align || 'left',
+                                                        verticalAlign: 'middle',
+                                                    }, children: renderCellContent(row, col) }, col.key))), Boolean(actions || rowActions) && ((0, jsx_runtime_1.jsx)("td", { style: {
+                                                        padding: compact ? '8px 12px' : '12px 16px',
+                                                        textAlign: 'right',
+                                                        verticalAlign: 'middle',
+                                                    }, onClick: (e) => e.stopPropagation(), children: (actions || rowActions)(row) }))] }), renderExpandedRow && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: visibleColumns.length + (actions || rowActions ? 1 : 0), style: {
+                                                    padding: compact ? '8px 12px' : '12px 16px',
+                                                    backgroundColor: 'rgba(99, 102, 241, 0.02)',
+                                                    borderBottom: '1px solid #E2E8F0',
+                                                }, children: renderExpandedRow(row) }) }))] }, rowId));
+                            })) })] }) })), activeView === 'kanban' && ((0, jsx_runtime_1.jsx)("div", { className: "sdui-kanban-board", style: {
+                    display: 'flex',
+                    gap: 16,
+                    overflowX: 'auto',
+                    paddingBottom: 14,
+                    minHeight: 520,
+                    alignItems: 'stretch',
+                }, children: kanbanStages.map((stage) => {
+                    const isColOver = dragOverCol === stage.key;
+                    const stageRecords = normalizedData.content.filter((item) => {
+                        const itemStage = getRowStage(item, stageKey);
+                        if (stage.statuses && stage.statuses.length > 0) {
+                            return stage.statuses.includes(itemStage) || itemStage === stage.key;
+                        }
+                        return itemStage === stage.key;
+                    });
+                    return ((0, jsx_runtime_1.jsxs)("div", { onDragOver: (e) => handleDragOver(e, stage.key), onDragLeave: () => setDragOverCol(null), onDrop: (e) => handleDrop(e, stage.key), style: {
+                            flex: '0 0 310px',
+                            background: isColOver ? 'rgba(99, 102, 241, 0.08)' : 'var(--surface-subtle, #F8FAFC)',
+                            border: `1px ${isColOver ? 'dashed var(--color-primary, #6366F1)' : 'solid var(--border-subtle, #E2E8F0)'}`,
+                            borderRadius: 16,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            maxHeight: 'calc(100vh - 280px)',
+                            transition: 'all 0.15s ease',
+                            boxShadow: '0 1px 3px rgba(15, 23, 42, 0.04)',
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    padding: '12px 14px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    borderBottom: '1px solid var(--border-subtle, #E2E8F0)',
+                                    background: 'var(--surface-card, #FFFFFF)',
+                                    borderTopLeftRadius: 16,
+                                    borderTopRightRadius: 16,
+                                    borderTop: `3px solid ${stage.color || '#6366F1'}`,
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 7 }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                    width: 8,
+                                                    height: 8,
+                                                    borderRadius: '50%',
+                                                    backgroundColor: stage.color || '#6366F1',
+                                                } }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 800, fontSize: '0.82rem', color: '#0F172A' }, children: stage.label })] }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                            fontSize: '0.72rem',
+                                            fontWeight: 800,
+                                            padding: '2px 8px',
+                                            borderRadius: 9999,
+                                            background: 'var(--surface-subtle, #F8FAFC)',
+                                            color: '#64748B',
+                                            border: '1px solid var(--border-subtle, #E2E8F0)',
+                                        }, children: stageRecords.length })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    padding: 10,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 10,
+                                    overflowY: 'auto',
+                                    flex: 1,
+                                }, children: stageRecords.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '36px 16px', textAlign: 'center', color: '#94A3B8', fontSize: '0.78rem', fontStyle: 'italic' }, children: "No records in this stage" })) : (stageRecords.map((item, i) => {
+                                    const draggable = isDraggable(item);
+                                    const isDragged = draggedItem && draggedItem.id === item.id;
+                                    const allowedNext = item.allowedNextTransitions || [];
+                                    if (renderCustomCard) {
+                                        return ((0, jsx_runtime_1.jsx)("div", { draggable: draggable, onDragStart: (e) => handleDragStart(e, item), onDragEnd: () => setDraggedItem(null), onClick: () => onRowClick?.(item), children: renderCustomCard(item, (target) => onTransitionStage?.(item, target)) }, item.id ?? i));
+                                    }
+                                    return ((0, jsx_runtime_1.jsxs)("div", { draggable: draggable, onDragStart: (e) => handleDragStart(e, item), onDragEnd: () => setDraggedItem(null), onClick: (e) => {
+                                            const target = e.target;
+                                            if (target.closest('button') || target.closest('select'))
+                                                return;
+                                            onRowClick?.(item);
+                                        }, style: {
+                                            background: 'var(--surface-card, #FFFFFF)',
+                                            border: '1px solid var(--border-subtle, #E2E8F0)',
+                                            borderRadius: 12,
+                                            padding: '12px 14px',
+                                            cursor: draggable ? 'grab' : onRowClick ? 'pointer' : 'default',
+                                            opacity: isDragged ? 0.4 : 1,
+                                            boxShadow: '0 1px 3px rgba(15, 23, 42, 0.04)',
+                                            transition: 'all 0.15s ease',
+                                        }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.transform = 'translateY(-2px)';
+                                            e.currentTarget.style.boxShadow = '0 8px 20px rgba(15, 23, 42, 0.08)';
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.transform = 'none';
+                                            e.currentTarget.style.boxShadow = '0 1px 3px rgba(15, 23, 42, 0.04)';
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6, marginBottom: 6 }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 800, fontSize: '0.82rem', color: '#0F172A', letterSpacing: '-0.01em' }, children: item.code || `#${String(item.id || i + 1).slice(0, 8)}` }), (item.stageCode || item.deliveryStatus || item.status) && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                                            fontSize: '0.66rem',
+                                                            fontWeight: 700,
+                                                            padding: '2px 7px',
+                                                            borderRadius: 9999,
+                                                            backgroundColor: getBadgeStyle(item.stageCode || item.deliveryStatus || item.status).bg,
+                                                            color: getBadgeStyle(item.stageCode || item.deliveryStatus || item.status).text,
+                                                            border: `1px solid ${getBadgeStyle(item.stageCode || item.deliveryStatus || item.status).border}`,
+                                                        }, children: String(item.stageName || item.stageCode || item.deliveryStatus || item.status).replace(/_/g, ' ') }))] }), (item.customerName || item.storeName) && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.78rem', fontWeight: 600, color: '#1E293B', marginBottom: 2 }, children: item.customerName || item.storeName })), item.itemsSummary && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.72rem', color: '#64748B', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginBottom: 6 }, children: item.itemsSummary })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }, children: [item.totalAmount !== undefined && ((0, jsx_runtime_1.jsxs)("span", { style: { fontWeight: 800, fontSize: '0.84rem', color: 'var(--color-primary, #6366F1)', fontFamily: 'ui-monospace, monospace' }, children: ["\u20B9", Number(item.totalAmount || 0).toLocaleString('en-IN')] })), item.createdAt && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.68rem', color: '#94A3B8' }, children: new Date(item.createdAt).toLocaleDateString() }))] }), allowedNext.length > 0 && onTransitionStage && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    marginTop: 8,
+                                                    paddingTop: 8,
+                                                    borderTop: '1px solid #F1F5F9',
+                                                    display: 'flex',
+                                                    gap: 4,
+                                                    flexWrap: 'wrap',
+                                                }, onClick: (e) => e.stopPropagation(), children: allowedNext.map((opt) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onTransitionStage(item, opt.code || opt.id, opt), style: {
+                                                        fontSize: '0.66rem',
+                                                        fontWeight: 700,
+                                                        padding: '2px 8px',
+                                                        borderRadius: 9999,
+                                                        border: '1px solid #BFDBFE',
+                                                        backgroundColor: '#EFF6FF',
+                                                        color: '#1D4ED8',
+                                                        cursor: 'pointer',
+                                                    }, children: ["\u2192 ", opt.name || opt.code?.replace(/_/g, ' ')] }, opt.id || opt.code))) })), Boolean(actions || rowActions) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    marginTop: 6,
+                                                    paddingTop: 6,
+                                                    borderTop: '1px solid #F1F5F9',
+                                                    display: 'flex',
+                                                    justifyContent: 'flex-end',
+                                                    gap: 4,
+                                                }, onClick: (e) => e.stopPropagation(), children: (actions || rowActions)(item) }))] }, item.id ?? i));
+                                })) })] }, stage.key));
+                }) })), activeView === 'cards' && ((0, jsx_runtime_1.jsx)("div", { className: "sdui-cards-grid", style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(290px, 1fr))',
+                    gap: 12,
+                }, children: loading ? ((0, jsx_runtime_1.jsx)("div", { style: { gridColumn: '1 / -1', padding: 48, textAlign: 'center', color: '#64748B' }, children: "Loading cards\u2026" })) : normalizedData.content.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: { gridColumn: '1 / -1', padding: 48, textAlign: 'center', color: '#64748B' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '1.4rem', marginBottom: 6 }, children: "\uD83D\uDCED" }), (0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 700, color: '#0F172A', marginBottom: 2 }, children: emptyMessage || 'No records found' }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.76rem' }, children: "Try clearing filters or search terms" })] })) : (normalizedData.content.map((item, idx) => {
+                    const currentStage = getRowStage(item, stageKey);
+                    const allowedNext = item.allowedNextTransitions || [];
+                    if (renderCustomCard) {
+                        return ((0, jsx_runtime_1.jsx)("div", { onClick: () => onRowClick?.(item), children: renderCustomCard(item, (target) => onTransitionStage?.(item, target)) }, item.id ?? idx));
+                    }
+                    return ((0, jsx_runtime_1.jsxs)("div", { onClick: (e) => {
+                            const target = e.target;
+                            if (target.closest('button'))
+                                return;
+                            onRowClick?.(item);
+                        }, style: {
+                            background: 'var(--surface-card, #FFFFFF)',
+                            border: '1px solid var(--border-subtle, #E2E8F0)',
+                            borderRadius: 14,
+                            padding: 16,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 8,
+                            cursor: onRowClick ? 'pointer' : 'default',
+                            boxShadow: '0 1px 3px rgba(15, 23, 42, 0.04)',
+                            transition: 'all 0.15s ease',
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.transform = 'translateY(-2px)';
+                            e.currentTarget.style.boxShadow = '0 8px 24px rgba(15, 23, 42, 0.08)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.transform = 'none';
+                            e.currentTarget.style.boxShadow = '0 1px 3px rgba(15, 23, 42, 0.04)';
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 800, fontSize: '0.85rem', color: '#0F172A' }, children: item.code || `#${String(item.id || idx + 1).slice(0, 8)}` }), currentStage && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                            fontSize: '0.68rem',
+                                            fontWeight: 700,
+                                            padding: '2px 8px',
+                                            borderRadius: 9999,
+                                            backgroundColor: getBadgeStyle(currentStage).bg,
+                                            color: getBadgeStyle(currentStage).text,
+                                            border: `1px solid ${getBadgeStyle(currentStage).border}`,
+                                        }, children: currentStage.replace(/_/g, ' ') }))] }), (item.customerName || item.storeName) && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.8rem', fontWeight: 600, color: '#1E293B' }, children: item.customerName || item.storeName })), item.itemsSummary && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.74rem', color: '#64748B' }, children: item.itemsSummary })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    marginTop: 'auto',
+                                    paddingTop: 10,
+                                    borderTop: '1px solid #F1F5F9',
+                                }, children: [item.totalAmount !== undefined && ((0, jsx_runtime_1.jsxs)("span", { style: { fontWeight: 800, fontSize: '0.88rem', color: 'var(--color-primary, #6366F1)', fontFamily: 'ui-monospace, monospace' }, children: ["\u20B9", Number(item.totalAmount || 0).toLocaleString('en-IN')] })), allowedNext.length > 0 && onTransitionStage && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onTransitionStage(item, allowedNext[0].code || allowedNext[0].id, allowedNext[0]), style: {
+                                            fontSize: '0.68rem',
+                                            fontWeight: 700,
+                                            padding: '3px 10px',
+                                            borderRadius: 9999,
+                                            border: '1px solid #BFDBFE',
+                                            backgroundColor: '#EFF6FF',
+                                            color: '#1D4ED8',
+                                            cursor: 'pointer',
+                                        }, children: ["\u2192 ", allowedNext[0].name || allowedNext[0].code?.replace(/_/g, ' ')] }))] }), Boolean(actions || rowActions) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    marginTop: 6,
+                                    paddingTop: 8,
+                                    borderTop: '1px solid #F1F5F9',
+                                    display: 'flex',
+                                    justifyContent: 'flex-end',
+                                    gap: 6,
+                                }, onClick: (e) => e.stopPropagation(), children: (actions || rowActions)(item) }))] }, item.id ?? idx));
+                })) })), (0, jsx_runtime_1.jsxs)("div", { className: "sdui-dt-footer", style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap: 12,
+                    padding: '10px 16px',
+                    background: 'var(--surface-card, #FFFFFF)',
+                    borderRadius: 14,
+                    border: '1px solid var(--border-subtle, #E2E8F0)',
+                    fontSize: '0.78rem',
+                    color: '#64748B',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [(0, jsx_runtime_1.jsx)("span", { children: "Rows per page:" }), (0, jsx_runtime_1.jsx)("select", { value: normalizedData.pageSize, onChange: (e) => onRowsPerPageChange?.(Number(e.target.value)), style: {
+                                    padding: '3px 6px',
+                                    borderRadius: 6,
+                                    border: '1px solid #CBD5E1',
+                                    fontSize: '0.78rem',
+                                    backgroundColor: '#FFFFFF',
+                                    color: '#0F172A',
+                                }, children: pageSizeOptions.map((sz) => ((0, jsx_runtime_1.jsx)("option", { value: sz, children: sz }, sz))) }), (0, jsx_runtime_1.jsx)("span", { children: normalizedData.totalElements > 0
+                                    ? `${normalizedData.pageNumber * normalizedData.pageSize + 1}–${Math.min((normalizedData.pageNumber + 1) * normalizedData.pageSize, normalizedData.totalElements)} of ${normalizedData.totalElements}`
+                                    : '0 records' })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: normalizedData.pageNumber <= 0, onClick: () => onPageChange?.(normalizedData.pageNumber - 1), style: {
+                                    padding: '4px 10px',
+                                    borderRadius: 6,
+                                    border: '1px solid #CBD5E1',
+                                    backgroundColor: '#FFFFFF',
+                                    fontSize: '0.78rem',
+                                    fontWeight: 600,
+                                    cursor: normalizedData.pageNumber <= 0 ? 'not-allowed' : 'pointer',
+                                    opacity: normalizedData.pageNumber <= 0 ? 0.4 : 1,
+                                }, children: "\u2039 Prev" }), (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: '0.78rem', color: '#0F172A', fontWeight: 600 }, children: ["Page ", normalizedData.pageNumber + 1, " of ", Math.max(1, normalizedData.totalPages)] }), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: normalizedData.last, onClick: () => onPageChange?.(normalizedData.pageNumber + 1), style: {
+                                    padding: '4px 10px',
+                                    borderRadius: 6,
+                                    border: '1px solid #CBD5E1',
+                                    backgroundColor: '#FFFFFF',
+                                    fontSize: '0.78rem',
+                                    fontWeight: 600,
+                                    cursor: normalizedData.last ? 'not-allowed' : 'pointer',
+                                    opacity: normalizedData.last ? 0.4 : 1,
+                                }, children: "Next \u203A" })] })] })] }));
+}
+exports.default = DynamicTable;