@airoom/nextmin-react 2.0.2 → 2.0.3

package/dist/views/list/DataTableHero.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QRCodeModal } from '../../components/QRCodeModal';
 import React from 'react';
 import Link from 'next/link';
 import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell, Pagination, PaginationItem, Select, SelectItem, Skeleton, Button, Tooltip, Spinner, } from '@heroui/react';
@@ -9,6 +10,7 @@ import { formatCell } from './formatters';
 import { summarizeAny } from './jsonSummary';
 import { api } from '../../lib/api';
 import { ConfirmDialog } from '../../components/ConfirmDialog';
+import { useAppNavigation } from '../../hooks/useAppNavigation';
 /** ---------- helpers: image detection/rendering ---------- */
 const IMG_EXT_RE = /\.(png|jpe?g|gif|webp|bmp|svg|avif|heic|heif)$/i;
 const IMG_COLUMN_RE = /(image|photo|avatar|logo|picture|thumbnail|icon)/i;
@@ -27,7 +29,13 @@ function isLikelyImageUrl(s, columnKey, attr) {
     const a = Array.isArray(attr) ? attr[0] : attr;
     const fmt = String(a?.format || '').toLowerCase();
     const type = String(a?.type || '').toLowerCase();
-    if (fmt === 'file' || type === 'file' || fmt === 'image' || type === 'image')
+    const fieldType = String(a?.fieldType || a?.filedType || '').toLowerCase();
+    if (fmt === 'file' ||
+        type === 'file' ||
+        fmt === 'image' ||
+        type === 'image' ||
+        fieldType === 'file' ||
+        fieldType === 'image')
         return true;
     // 3) Extension check (permissive like DynamicViewer)
     const pure = s.split('?')[0].split('#')[0];
@@ -308,12 +316,94 @@ function formatDateLocal(d) {
         return d.toString();
     }
 }
+function isSystemRow(item, columns) {
+    if (!item || typeof item !== 'object')
+        return false;
+    const typeCol = columns.find((c) => c.toLowerCase() === 'type');
+    const typeVal = typeCol ? item?.[typeCol] : undefined;
+    const typeString = typeof typeVal === 'string'
+        ? typeVal
+        : typeof typeVal?.value === 'string'
+            ? typeVal.value
+            : typeof typeVal?.name === 'string'
+                ? typeVal.name
+                : '';
+    return String(typeString ?? '').toLowerCase() === 'system';
+}
 /** ---------- component ---------- */
-export function DataTableHero({ modelName, columns, rows, total, page, pageSize, onPageChange, onPageSizeChange, baseHref, loading, error, onDeleted, topContent, schema, onRequestView, }) {
+export function DataTableHero({ modelName, columns, rows, total, page, pageSize, onPageChange, onPageSizeChange, baseHref, loading, error, onDeleted, topContent, schema, onRequestView, sort, sortType, onSortChange, }) {
+    const navigateTo = useAppNavigation();
     const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
     const [pendingDeleteId, setPendingDeleteId] = React.useState(null);
     const [isDeleting, setIsDeleting] = React.useState(false);
     const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+    const [qrModalState, setQrModalState] = React.useState(null);
+    const [selectedKeys, setSelectedKeys] = React.useState(new Set());
+    const [isBulkDeleting, setIsBulkDeleting] = React.useState(false);
+    const [isBulkDialogOpen, setIsBulkDialogOpen] = React.useState(false);
+    const canDelete = schema?.allowedMethods?.delete !== false;
+    const selectionMode = !loading && canDelete ? 'multiple' : undefined;
+    React.useEffect(() => {
+        setSelectedKeys(new Set());
+    }, [page, pageSize, modelName, rows]);
+    const selectedIds = React.useMemo(() => {
+        if (!canDelete || loading)
+            return [];
+        if (selectedKeys === 'all') {
+            return rows
+                .filter((r) => !isSystemRow(r, columns))
+                .map((r) => String(r.id || r._id));
+        }
+        if (selectedKeys instanceof Set) {
+            const keysArr = Array.from(selectedKeys);
+            return keysArr
+                .map((k) => String(k))
+                .filter((id) => {
+                const row = rows.find((r) => String(r.id || r._id) === id);
+                return row ? !isSystemRow(row, columns) : true;
+            });
+        }
+        return [];
+    }, [selectedKeys, rows, columns, canDelete, loading]);
+    const disabledKeys = React.useMemo(() => {
+        const disabled = new Set();
+        rows.forEach((r) => {
+            if (isSystemRow(r, columns)) {
+                disabled.add(String(r.id || r._id));
+            }
+        });
+        return disabled;
+    }, [rows, columns]);
+    const handleConfirmBulkDelete = async () => {
+        if (selectedIds.length === 0) {
+            setIsBulkDialogOpen(false);
+            return;
+        }
+        try {
+            setIsBulkDeleting(true);
+            await Promise.all(selectedIds.map((id) => api.remove(modelName, id)));
+            setSelectedKeys(new Set());
+            onDeleted?.();
+        }
+        catch (err) {
+            console.error('Bulk delete failed:', err);
+        }
+        finally {
+            setIsBulkDeleting(false);
+            setIsBulkDialogOpen(false);
+        }
+    };
+    const combinedTopContent = React.useMemo(() => {
+        return (_jsxs("div", { className: "flex flex-col gap-3", children: [topContent, selectedIds.length > 0 && (_jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 rounded-medium bg-danger-50 dark:bg-danger-900/20 border border-danger-200 dark:border-danger-800", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-danger-700 dark:text-danger-300", children: [_jsx(LucideIcons.CheckSquare, { size: 18 }), _jsxs("span", { children: [selectedIds.length, " ", selectedIds.length === 1 ? 'item' : 'items', " selected"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "flat", color: "default", onPress: () => setSelectedKeys(new Set()), children: "Cancel" }), _jsxs(Button, { size: "sm", color: "danger", variant: "solid", startContent: !isBulkDeleting ? _jsx(LucideIcons.Trash2, { size: 16 }) : undefined, isLoading: isBulkDeleting, onPress: () => setIsBulkDialogOpen(true), children: ["Delete Selected (", selectedIds.length, ")"] })] })] }))] }));
+    }, [topContent, selectedIds.length, isBulkDeleting]);
+    const sortDescriptor = React.useMemo(() => {
+        if (!sort)
+            return undefined;
+        return {
+            column: sort,
+            direction: sortType === 'asc' ? 'ascending' : 'descending',
+        };
+    }, [sort, sortType]);
     const headerItems = React.useMemo(() => [
         ...columns.map((c) => ({ key: c, label: c })),
         { key: 'actions', label: 'Actions' },
@@ -342,72 +432,95 @@ export function DataTableHero({ modelName, columns, rows, total, page, pageSize,
             setIsDialogOpen(false);
         }
     };
-    return (_jsxs("div", { className: "flex-grow overflow-hidden flex flex-col min-h-0", children: [_jsxs(Table, { "aria-label": "Model table", isHeaderSticky: true, removeWrapper: false, classNames: {
+    return (_jsxs("div", { className: "flex-grow overflow-hidden flex flex-col min-h-0", children: [_jsxs(Table, { "aria-label": "Model table", isHeaderSticky: true, removeWrapper: false, selectionMode: selectionMode, selectedKeys: selectedKeys, onSelectionChange: setSelectedKeys, disabledKeys: disabledKeys, sortDescriptor: sortDescriptor, onSortChange: (descriptor) => {
+                    if (onSortChange && descriptor.column) {
+                        const dir = descriptor.direction === 'ascending' ? 'asc' : 'desc';
+                        onSortChange(String(descriptor.column), dir);
+                    }
+                }, classNames: {
                     base: 'max-h-full flex flex-col min-h-0 overflow-visible',
                     wrapper: 'flex-grow min-h-0 overflow-auto !p-0 !bg-transparent !shadow-none !rounded-none relative',
                     table: 'min-w-full', // Allow auto-sizing to prevent clipping
                     thead: '[&>tr]:first:rounded-none',
-                    th: 'bg-default-100 text-default-600',
+                    th: 'bg-default-100 text-default-600 [&[data-selection-cell=true]]:w-12 [&[data-selection-cell=true]]:min-w-[48px] [&[data-selection-cell=true]]:max-w-[48px]',
+                    td: '[&[data-selection-cell=true]]:w-12 [&[data-selection-cell=true]]:min-w-[48px] [&[data-selection-cell=true]]:max-w-[48px]',
                 }, bottomContent: _jsxs("div", { className: "flex items-center justify-between px-2 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-foreground/70", children: "Rows per page:" }), _jsx(Select, { size: "sm", "aria-label": "Rows per page", selectedKeys: new Set([String(pageSize)]), onSelectionChange: (keys) => {
                                         const val = Array.from(keys)[0];
                                         if (val)
                                             onPageSizeChange(Number(val));
-                                    }, className: "w-24", children: [10, 20, 50, 100].map((n) => (_jsx(SelectItem, { textValue: String(n), children: n }, String(n)))) })] }), _jsx(Pagination, { size: "sm", total: pageCount, page: page, onChange: onPageChange, showControls: true, variant: "flat", renderItem: (props) => {
-                                if (props.value === 'prev') {
-                                    return (_jsx(Button, { isIconOnly: true, size: "sm", variant: "flat", onPress: props.onPress, isDisabled: props.isDisabled, children: _jsx(ChevronLeft, { size: 16 }) }));
+                                    }, className: "w-24", children: [10, 20, 50, 100].map((n) => (_jsx(SelectItem, { textValue: String(n), children: n }, String(n)))) })] }), _jsx(Pagination, { size: "sm", total: pageCount, page: page, onChange: onPageChange, showControls: true, variant: "flat", renderItem: ({ key, ...itemProps }) => {
+                                if (itemProps.value === 'prev') {
+                                    return (_jsx(Button, { isIconOnly: true, size: "sm", variant: "flat", onPress: itemProps.onPress, isDisabled: itemProps.isDisabled, children: _jsx(ChevronLeft, { size: 16 }) }, key));
                                 }
-                                if (props.value === 'next') {
-                                    return (_jsx(Button, { isIconOnly: true, size: "sm", variant: "flat", onPress: props.onPress, isDisabled: props.isDisabled, children: _jsx(ChevronRight, { size: 16 }) }));
+                                if (itemProps.value === 'next') {
+                                    return (_jsx(Button, { isIconOnly: true, size: "sm", variant: "flat", onPress: itemProps.onPress, isDisabled: itemProps.isDisabled, children: _jsx(ChevronRight, { size: 16 }) }, key));
                                 }
-                                return _jsx(PaginationItem, { ...props });
-                            } })] }), bottomContentPlacement: "outside", topContent: topContent, topContentPlacement: "outside", children: [_jsx(TableHeader, { columns: headerItems, children: (col) => (_jsx(TableColumn, { className: `text-xs uppercase tracking-wide ${col.key === 'actions'
+                                return _jsx(PaginationItem, { ...itemProps }, key);
+                            } })] }), bottomContentPlacement: "outside", topContent: combinedTopContent, topContentPlacement: "outside", children: [_jsx(TableHeader, { columns: headerItems, children: (col) => (_jsx(TableColumn, { allowsSorting: col.key !== 'actions', className: `text-xs uppercase tracking-wide ${col.key === 'actions'
                                 ? 'sticky right-0 bg-default-100 z-30 shadow-[-1px_0_2px_rgba(0,0,0,0.05)] border-l border-default-200 text-center'
                                 : ''}`, width: col.key === 'actions' ? 130 : 200, children: col.label }, col.key)) }), _jsx(TableBody, { items: bodyItems, emptyContent: loading ? undefined : error || 'No data', children: (item) => (_jsx(TableRow, { children: (columnKey) => {
                                 const key = String(columnKey);
+                                const stopRowSelectionProps = {
+                                    onPointerDown: (e) => e.stopPropagation(),
+                                    onMouseDown: (e) => e.stopPropagation(),
+                                    onClick: (e) => e.stopPropagation(),
+                                };
                                 if (loading) {
-                                    return (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-3 w-3/4 rounded-md" }) }, `${item.id}-${key}`));
+                                    return (_jsx(TableCell, { ...stopRowSelectionProps, children: _jsx(Skeleton, { className: "h-3 w-3/4 rounded-md" }) }, `${item.id}-${key}`));
                                 }
                                 if (key === 'actions') {
-                                    const typeCol = columns.find((c) => c.toLowerCase() === 'type');
-                                    const typeVal = typeCol ? item?.[typeCol] : undefined;
-                                    const typeString = typeof typeVal === 'string'
-                                        ? typeVal
-                                        : typeof typeVal?.value === 'string'
-                                            ? typeVal.value
-                                            : typeof typeVal?.name === 'string'
-                                                ? typeVal.name
-                                                : '';
-                                    const isSystemRow = String(typeString ?? '').toLowerCase() === 'system';
-                                    return (_jsx(TableCell, { className: "sticky right-0 !bg-background dark:!bg-content1 z-20 shadow-[-1px_0_2px_rgba(0,0,0,0.05)] border-l border-default-200", children: _jsxs("div", { className: "flex items-center justify-center gap-1", children: [schema?.actions?.map((action, idx) => {
-                                                    let href = action.href;
+                                    const isSystemRowItem = isSystemRow(item, columns);
+                                    return (_jsx(TableCell, { ...stopRowSelectionProps, className: "sticky right-0 !bg-background dark:!bg-content1 z-20 shadow-[-1px_0_2px_rgba(0,0,0,0.05)] border-l border-default-200", children: _jsxs("div", { className: "flex items-center justify-center gap-1", children: [schema?.actions?.map((action, idx) => {
+                                                    const isQr = action?.type === 'qr' ||
+                                                        action?.actionType === 'qr' ||
+                                                        action.icon === 'QrCode' ||
+                                                        action.label?.toLowerCase() === 'qr code';
+                                                    let href = action.href || '';
                                                     href = href.replace('{id}', String(item.id || item._id || ''));
                                                     const relatedId = item._actionsData?.[action.relatedModel || ''];
                                                     if (relatedId) {
                                                         href = href.replace('{relatedId}', relatedId);
                                                     }
-                                                    // Condition: if {relatedId} placeholder is used but NO relatedId found, hide it
-                                                    if (action.href.includes('{relatedId}') &&
+                                                    if (!isQr &&
+                                                        action.href &&
+                                                        action.href.includes('{relatedId}') &&
                                                         !relatedId) {
                                                         return null;
                                                     }
-                                                    // Or if strictly specified relatedModel but no data
-                                                    if (action.relatedModel && !relatedId) {
+                                                    if (!isQr && action.relatedModel && !relatedId) {
                                                         return null;
                                                     }
                                                     const IconComponent = action.icon
                                                         ? LucideIcons[action.icon]
                                                         : null;
-                                                    return (_jsx(Tooltip, { content: action.label, children: _jsx(Button, { as: Link, href: href, size: "sm", variant: action.variant || 'light', color: action.color || 'default', isIconOnly: !!IconComponent, className: IconComponent ? '' : 'min-w-fit h-8 px-3', children: IconComponent ? (_jsx(IconComponent, { size: 18 })) : (action.label) }) }, `custom-action-${idx}`));
-                                                }), _jsx(Tooltip, { content: "View", children: _jsx(Button, { isIconOnly: true, size: "sm", variant: "light", "aria-label": "View", onPress: () => onRequestView?.(item), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }) }) }), _jsx(Tooltip, { content: isSystemRow
+                                                    return (_jsx(Tooltip, { content: action.label, children: _jsx(Button, { as: isQr ? undefined : Link, href: isQr ? undefined : href, onPress: () => {
+                                                                if (isQr) {
+                                                                    setQrModalState({ item, action });
+                                                                }
+                                                                else if (href) {
+                                                                    navigateTo(href);
+                                                                }
+                                                            }, size: "sm", variant: action.variant || 'light', color: action.color || 'default', isIconOnly: !!IconComponent, className: IconComponent ? '' : 'min-w-fit h-8 px-3', children: IconComponent ? (_jsx(IconComponent, { size: 18 })) : (action.label) }) }, `custom-action-${idx}`));
+                                                }), _jsx(Tooltip, { content: "View", children: _jsx(Button, { isIconOnly: true, size: "sm", variant: "light", "aria-label": "View", onPress: () => onRequestView?.(item), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }) }) }), schema?.allowedMethods?.update !== false && (_jsx(Tooltip, { content: isSystemRowItem
                                                         ? 'System record — editing disabled'
-                                                        : 'Edit', children: _jsx(Button, { as: isSystemRow ? undefined : Link, href: isSystemRow ? undefined : `${baseHref}/${item.id}`, isIconOnly: true, size: "sm", variant: "light", isDisabled: isSystemRow, "aria-disabled": isSystemRow, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M12 20h9" }), _jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" })] }) }) }), _jsx(Tooltip, { content: isSystemRow
+                                                        : 'Edit', children: isSystemRowItem ? (_jsx("span", { className: "inline-flex items-center justify-center min-w-8 w-8 h-8 rounded-small text-default-400 opacity-50 cursor-not-allowed", "aria-disabled": "true", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M12 20h9" }), _jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" })] }) })) : (_jsx(Link, { href: `${baseHref}/${item.id ?? item._id}`, onClick: (e) => {
+                                                            if (e.metaKey ||
+                                                                e.ctrlKey ||
+                                                                e.shiftKey ||
+                                                                e.altKey ||
+                                                                e.button !== 0) {
+                                                                return;
+                                                            }
+                                                            e.preventDefault();
+                                                            navigateTo(`${baseHref}/${item.id ?? item._id}`);
+                                                        }, className: "inline-flex items-center justify-center min-w-8 w-8 h-8 rounded-small text-default-foreground hover:bg-default/40 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus", "aria-label": "Edit", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M12 20h9" }), _jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" })] }) })) })), schema?.allowedMethods?.delete !== false && (_jsx(Tooltip, { content: isSystemRowItem
                                                         ? 'System record — deletion disabled'
-                                                        : 'Delete', children: _jsx(Button, { isIconOnly: true, size: "sm", variant: "light", color: "danger", isDisabled: isSystemRow, "aria-disabled": isSystemRow, onPress: () => {
-                                                            if (!isSystemRow)
+                                                        : 'Delete', children: _jsx(Button, { isIconOnly: true, size: "sm", variant: "light", color: "danger", isDisabled: isSystemRowItem, "aria-disabled": isSystemRowItem, onPress: () => {
+                                                            if (!isSystemRowItem)
                                                                 requestDelete(item.id);
                                                         }, children: isDeleting && pendingDeleteId === item.id ? (_jsx(Spinner, { size: "sm" })) : (
                                                         // Trash icon
-                                                        _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6l-1 14H6L5 6" }), _jsx("path", { d: "M10 11v6" }), _jsx("path", { d: "M14 11v6" })] })) }) })] }) }, `${item.id}-actions`));
+                                                        _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6l-1 14H6L5 6" }), _jsx("path", { d: "M10 11v6" }), _jsx("path", { d: "M14 11v6" })] })) }) }))] }) }, `${item.id}-actions`));
                                 }
                                 // Prepare raw value (parse JSON-like strings first)
                                 let rawRawVal = item[key];
@@ -419,31 +532,31 @@ export function DataTableHero({ modelName, columns, rows, total, page, pageSize,
                                 const attributes = (schema?.attributes ?? {});
                                 const maybeImg = maybeRenderImageCell(rawVal, key, attributes[key]);
                                 if (maybeImg) {
-                                    return (_jsx(TableCell, { children: maybeImg }, `${item.id ?? item._id}-${key}`));
+                                    return (_jsx(TableCell, { ...stopRowSelectionProps, children: maybeImg }, `${item.id ?? item._id}-${key}`));
                                 }
                                 // 0) Date fields (createdAt, updatedAt, deletedAt)
                                 if (isDateField(key)) {
                                     const d = tryParseDate(rawVal);
                                     if (d) {
-                                        return (_jsx(TableCell, { children: formatDateLocal(d) }, `${item.id ?? item._id}-${key}`));
+                                        return (_jsx(TableCell, { ...stopRowSelectionProps, children: formatDateLocal(d) }, `${item.id ?? item._id}-${key}`));
                                     }
                                 }
                                 // ... the rest of the formatters ...
                                 // 1) Time-only ranges like "15:00..00:00 17:00..23:00"
                                 const timeRangePretty = formatTimeOnlyRanges(rawVal);
                                 if (timeRangePretty) {
-                                    return (_jsx(TableCell, { children: timeRangePretty }, `${item.id ?? item._id}-${key}`));
+                                    return (_jsx(TableCell, { ...stopRowSelectionProps, children: timeRangePretty }, `${item.id ?? item._id}-${key}`));
                                 }
                                 // 2) Object/array with "show"/"showKey" or common label fields
                                 const showPretty = formatShowValue(rawVal, attributes[key]);
                                 if (showPretty) {
-                                    return (_jsx(TableCell, { children: truncateText(showPretty, 35) }, `${item.id ?? item._id}-${key}`));
+                                    return (_jsx(TableCell, { ...stopRowSelectionProps, children: truncateText(showPretty, 35) }, `${item.id ?? item._id}-${key}`));
                                 }
                                 // 3) Generic JSON/array/object summarizer (supports raw JSON string too)
                                 const showKey = (Array.isArray(attributes[key]) ? attributes[key][0] : attributes[key])?.show;
                                 const jsonSummary = summarizeAny(rawVal, showKey);
                                 if (typeof jsonSummary === 'string' && jsonSummary.length) {
-                                    return (_jsx(TableCell, { children: truncateText(jsonSummary, 35) }, `${item.id ?? item._id}-${key}`));
+                                    return (_jsx(TableCell, { ...stopRowSelectionProps, children: truncateText(jsonSummary, 35) }, `${item.id ?? item._id}-${key}`));
                                 }
                                 // 4) Existing formatter pipeline
                                 const formatted = formatCell(rawVal, key);
@@ -452,6 +565,6 @@ export function DataTableHero({ modelName, columns, rows, total, page, pageSize,
                                 const displayValue = isSimple
                                     ? truncateText(String(formatted), 35)
                                     : formatted;
-                                return (_jsx(TableCell, { children: displayValue }, `${item.id ?? item._id}-${key}`));
-                            } }, item.id)) })] }), _jsx(ConfirmDialog, { isOpen: isDialogOpen, onClose: () => setIsDialogOpen(false), onConfirm: handleConfirmDelete, isLoading: isDeleting, title: "Delete this record?", description: "This action cannot be undone. The record will be permanently removed.", confirmText: "Delete", cancelText: "Cancel" })] }));
+                                return (_jsx(TableCell, { ...stopRowSelectionProps, children: displayValue }, `${item.id ?? item._id}-${key}`));
+                            } }, item.id)) })] }), _jsx(ConfirmDialog, { isOpen: isDialogOpen, onClose: () => setIsDialogOpen(false), onConfirm: handleConfirmDelete, isLoading: isDeleting, title: "Delete this record?", description: "This action cannot be undone. The record will be permanently removed.", confirmText: "Delete", cancelText: "Cancel" }), _jsx(QRCodeModal, { isOpen: !!qrModalState, onClose: () => setQrModalState(null), item: qrModalState?.item, action: qrModalState?.action, modelName: modelName }), _jsx(ConfirmDialog, { isOpen: isBulkDialogOpen, onClose: () => setIsBulkDialogOpen(false), onConfirm: handleConfirmBulkDelete, isLoading: isBulkDeleting, title: `Delete ${selectedIds.length} selected ${selectedIds.length === 1 ? 'record' : 'records'}?`, description: `Are you sure you want to delete ${selectedIds.length} selected ${selectedIds.length === 1 ? 'record' : 'records'}? This action cannot be undone.`, confirmText: `Delete ${selectedIds.length} ${selectedIds.length === 1 ? 'record' : 'records'}`, cancelText: "Cancel" })] }));
 }

package/dist/views/list/ListHeader.js

@@ -2,6 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from 'next/link';
 import { Button, Divider } from '@heroui/react';
+import { useAppNavigation } from '../../hooks/useAppNavigation';
 export function ListHeader({ title, createHref, hideCreate = false, loading, children, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("h2", { className: "m-0 text-xl font-semibold", children: title }), _jsxs("div", { className: "flex items-center gap-3", children: [!hideCreate && createHref ? (_jsx(Link, { href: createHref, children: _jsx(Button, { size: "sm", color: "primary", isDisabled: loading, children: "Create" }) })) : null, children] })] }), _jsx(Divider, { className: "my-3" })] }));
+    const navigateTo = useAppNavigation();
+    const handleCreate = (e) => {
+        if (!createHref)
+            return;
+        e.preventDefault();
+        navigateTo(createHref);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("h2", { className: "m-0 text-xl font-semibold", children: title }), _jsxs("div", { className: "flex items-center gap-3", children: [!hideCreate && createHref ? (_jsx(Link, { href: createHref, onClick: handleCreate, children: _jsx(Button, { size: "sm", color: "primary", isDisabled: loading, onPress: () => navigateTo(createHref), children: "Create" }) })) : null, children] })] }), _jsx(Divider, { className: "my-3" })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airoom/nextmin-react",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,11 +56,13 @@
     "@tiptap/react": "^3.13.0",
     "@tiptap/starter-kit": "^3.13.0",
     "@tiptap/suggestion": "^3.13.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react-resizable": "^3.0.8",
     "clsx": "^2.1.1",
     "dompurify": "^3.3.0",
     "framer-motion": "^12.23.12",
     "lucide-react": "^0.556.0",
+    "qrcode": "^1.5.4",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-redux": ">=9",
@@ -79,4 +81,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}