@tap-payments/os-micro-frontend-shared 0.1.372-test.2-test.3-test.4-test.5 → 0.1.372-test.2-test.3-test.4-test.5-test.6-test.7

package/build/components/TableHeader/TableView/CreateViewDialog.d.ts

@@ -1,3 +1,3 @@
 import type { CreateCustomViewDialogProps } from './types';
-declare function CreateViewDialog({ open, onClose, onCreate, availableColumns, isLoading, defaultColumns, editingView, onDelete, tableViews, mode, }: Readonly<CreateCustomViewDialogProps>): import("react/jsx-runtime").JSX.Element | null;
+declare function CreateViewDialog({ open, onClose, onCreate, availableColumns, defaultColumns, editingView, onDelete, tableViews, mode, }: Readonly<CreateCustomViewDialogProps>): import("react/jsx-runtime").JSX.Element | null;
 export default CreateViewDialog;

package/build/components/TableHeader/TableView/CreateViewDialog.js

@@ -8,10 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
 import { Box, Typography, CircularProgress, Dialog } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Draggable from 'react-draggable';
 import { InputBase } from '../../index.js';
+import { useToast } from '../../../hooks/index.js';
 import Toolbar, { StyledHeaderWrapperStyled } from '../../Toolbar';
 import { CloseIcon } from '../../ToolbarIcon';
 import { TEMPLATE_NAME_MAX_LENGTH } from './constants';
@@ -20,8 +22,18 @@ import { DIALOG_WIDTH, DIALOG_HEIGHT } from './constants';
 import { useCreateViewDialog } from './hooks';
 import { ColumnList } from './components/ColumnList';
 import { convertColumnsToLayoutSection } from './utils';
-function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLoading = false, defaultColumns = [], editingView, onDelete, tableViews = [], mode = 'sheet', }) {
+function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], defaultColumns = [], editingView, onDelete, tableViews = [], mode = 'sheet', }) {
     const { t } = useTranslation();
+    const toast = useToast();
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    // Reset loading state when dialog closes
+    React.useEffect(() => {
+        if (!open) {
+            setIsDeleting(false);
+            setIsLoading(false);
+        }
+    }, [open]);
     const { templateName, setTemplateName, selectedColumns, columnNames, allSelected, someSelected, isNameValid, hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose, handleReorder, handleColumnToggle, handleSubItemToggle, handleSelectAll, handleResetToDefault, } = useCreateViewDialog({
         open,
         availableColumns,
@@ -30,20 +42,40 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLo
         tableViews,
     });
     const handleCreate = () => __awaiter(this, void 0, void 0, function* () {
-        if (!isNameValid)
+        if (!isNameValid || isLoading || isDeleting)
             return;
-        const columnsToCreate = selectedColumns.filter((col) => col.selected);
-        const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
-        yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
-        onClose();
+        setIsLoading(true);
+        try {
+            const columnsToCreate = selectedColumns.filter((col) => col.selected);
+            const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
+            yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
+            onClose();
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to save view. Please try again.';
+            toast.error(errorMessage);
+        }
+        finally {
+            setIsLoading(false);
+        }
     });
     const handleDelete = () => __awaiter(this, void 0, void 0, function* () {
-        if (!editingView)
+        if (!editingView || isDeleting || isLoading)
             return;
         const templateId = editingView.templateId || editingView.id;
         console.log({ templateId });
-        yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(templateId));
-        onClose();
+        setIsDeleting(true);
+        try {
+            yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(templateId));
+            onClose();
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to delete view. Please try again.';
+            toast.error(errorMessage);
+        }
+        finally {
+            setIsDeleting(false);
+        }
     });
     if (!open)
         return null;
@@ -55,6 +87,6 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLo
                         transition: 'none',
                     },
                 },
-            } }, { children: [_jsx(StyledHeaderWrapperStyled, Object.assign({ id: "draggable-dialog-title", style: { cursor: 'move' } }, { children: _jsx(Toolbar, { isHovered: true, title: editingView ? 'Edit Custom View' : t('createCustomView') || 'Create Custom View', leftActions: _jsx(CloseIcon, { onClick: onClose }) }) })), _jsxs(DialogContentWrapper, { children: [_jsxs(ScrollableContent, { children: [_jsxs(TitleSection, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#9F9F9F', lineHeight: '0.7' } }, { children: "Custom" })), _jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#20232B', lineHeight: 1.2 } }, { children: "View" }))] }), editingView && _jsx(DeleteButton, Object.assign({ onClick: handleDelete }, { children: "Delete View" }))] }), _jsx(Box, Object.assign({ sx: { mb: 3 } }, { children: _jsx(InputBase, { name: "templateName", label: "Name", value: templateName, onChange: (value) => setTemplateName(value), hasError: false, inputProps: { maxLength: TEMPLATE_NAME_MAX_LENGTH }, required: true }) })), _jsx(ColumnList, { selectedColumns: selectedColumns, columnNames: columnNames, allSelected: allSelected, someSelected: someSelected, hoveredColumn: hoveredColumn, anchorEl: anchorEl, onReorder: handleReorder, onColumnToggle: handleColumnToggle, onSubItemToggle: handleSubItemToggle, onSelectAll: handleSelectAll, onResetToDefault: handleResetToDefault, onSubmenuEnter: openSubmenu, onSubmenuLeave: closeSubmenu, onCancelClose: cancelClose })] }), _jsx(FooterBar, {}), _jsx(CreateButtonWrapper, { children: _jsx(CreateButton, Object.assign({ variant: "contained", onClick: handleCreate, disabled: !isNameValid || isLoading }, { children: isLoading ? (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(CircularProgress, { size: 14, color: "inherit" }), _jsx("span", { children: editingView ? 'Saving...' : 'Creating...' })] }))) : editingView ? ('Update View') : ('Create View') })) })] })] })) })));
+            } }, { children: [_jsx(StyledHeaderWrapperStyled, Object.assign({ id: "draggable-dialog-title", style: { cursor: 'move' } }, { children: _jsx(Toolbar, { isHovered: true, title: editingView ? 'Edit Custom View' : t('createCustomView') || 'Create Custom View', leftActions: _jsx(CloseIcon, { onClick: onClose }) }) })), _jsxs(DialogContentWrapper, { children: [_jsxs(ScrollableContent, { children: [_jsxs(TitleSection, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#9F9F9F', lineHeight: '0.7' } }, { children: "Custom" })), _jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#20232B', lineHeight: 1.2 } }, { children: "View" }))] }), editingView && (_jsx(DeleteButton, Object.assign({ onClick: handleDelete, disabled: isDeleting }, { children: isDeleting ? (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(CircularProgress, { size: 14, color: "inherit" }), _jsx("span", { children: "Deleting..." })] }))) : ('Delete View') })))] }), _jsx(Box, Object.assign({ sx: { mb: 3 } }, { children: _jsx(InputBase, { name: "templateName", label: "Name", value: templateName, onChange: (value) => setTemplateName(value), hasError: false, inputProps: { maxLength: TEMPLATE_NAME_MAX_LENGTH }, required: true }) })), _jsx(ColumnList, { selectedColumns: selectedColumns, columnNames: columnNames, allSelected: allSelected, someSelected: someSelected, hoveredColumn: hoveredColumn, anchorEl: anchorEl, onReorder: handleReorder, onColumnToggle: handleColumnToggle, onSubItemToggle: handleSubItemToggle, onSelectAll: handleSelectAll, onResetToDefault: handleResetToDefault, onSubmenuEnter: openSubmenu, onSubmenuLeave: closeSubmenu, onCancelClose: cancelClose })] }), _jsx(FooterBar, {}), _jsx(CreateButtonWrapper, { children: _jsx(CreateButton, Object.assign({ variant: "contained", onClick: handleCreate, disabled: !isNameValid || isLoading || isDeleting, title: !isNameValid ? `Name is required. Current: "${templateName}"` : undefined }, { children: isLoading ? (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(CircularProgress, { size: 14, color: "inherit" }), _jsx("span", { children: editingView ? 'Saving...' : 'Creating...' })] }))) : editingView ? ('Update View') : ('Create View') })) })] })] })) })));
 }
 export default CreateViewDialog;

package/build/components/TableHeader/TableView/ViewSelector.js

@@ -13,7 +13,7 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
     const { t } = useTranslation();
     // Map tableMode to viewMode: 'sheet' → 'sheet', 'default' → 'advanced'
     const mode = tableMode === 'sheet' ? 'sheet' : 'advanced';
-    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews } = useViewsManager({
+    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews, defaultTemplate, } = useViewsManager({
         mode,
         templates,
         lang,
@@ -22,6 +22,7 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
     const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
     const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, } = useViewSelector({
         mode,
+        onViewChange,
         onTableViewsChange,
         onCustomViewsChange,
         onCreateCustomView,
@@ -32,11 +33,11 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
         tableViews,
         customViews,
         defaultColumns,
+        defaultTemplate,
         setInternalCustomViews,
         setInternalTableViews,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e, templateId) => {
-                                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(templateId);
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e, selectedView) => {
                                 setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
                             }, setViews: handleResetViews, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
 }

package/build/components/TableHeader/TableView/ViewsDropdown.js

@@ -39,24 +39,17 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
     // Default templates are merged into built-in Default view, so no need to sort
     const viewList = [...defaultViewList, ...customViews];
     const handleViewClick = (item) => {
-        setSelectedViewInfo(item);
         if (item.columns)
             setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
-        // Call onSelect with templateId for custom views
-        if (item.isCustom && item.templateId) {
-            // Create a synthetic event-like object for onSelect
-            const syntheticEvent = {
-                currentTarget: anchorEl || document.createElement('div'),
-            };
-            onSelect(syntheticEvent, item.templateId);
-        }
-        else {
-            // For default view, call onSelect without templateId
-            const syntheticEvent = {
-                currentTarget: anchorEl || document.createElement('div'),
-            };
-            onSelect(syntheticEvent);
-        }
+        // Call onSelect with the full view object
+        const syntheticEvent = {
+            currentTarget: anchorEl || document.createElement('div'),
+        };
+        // Pass the full view object for custom views, undefined for default view
+        const viewToPass = item.isCustom ? item : undefined;
+        onSelect(syntheticEvent, viewToPass);
+        // Update selected view info with the view object
+        setSelectedViewInfo(item, viewToPass);
     };
     const toggleColumnSelection = (columnName) => {
         if (!setDefaultColumns)
@@ -193,6 +186,21 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
                                     handleSubmenuLeave();
                                     onSelect(e);
                                     onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false); // Don't use current state for "New Custom View"
-                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "icon", style: { opacity: shouldDimNewCustomView ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: shouldDimNewCustomView ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredItem && submenuAnchorEl && getHoveredSubmenu().length > 0 && (_jsx(Menu, Object.assign({ open: Boolean(hoveredItem), anchorEl: submenuAnchorEl, placement: "right-start", onMouseEnter: handleSubmenuEnter, onMouseLeave: handleSubmenuLeave }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: getHoveredSubmenu(), allCurrentSelected: allCurrentSelected, someCurrentSelected: someCurrentSelected, onSelectAll: handleSelectAll, onReset: handleReset, onColumnToggle: toggleColumnSelection, onNestedItemToggle: toggleNestedItem, anchorEl: submenuAnchorEl, isModified: isSubmenuModified }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: shouldDimNewCustomView, onClick: shouldDimNewCustomView ? undefined : handleSaveAsCustomView }, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "Save as a custom view" })), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "add", style: { width: 10, height: 10, opacity: shouldDimNewCustomView ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: shouldDimNewCustomView ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: handleCancel, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleOkay, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
+                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "icon", style: { opacity: shouldDimNewCustomView ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: shouldDimNewCustomView ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredItem && submenuAnchorEl && getHoveredSubmenu().length > 0 && (_jsx(Menu, Object.assign({ open: Boolean(hoveredItem), anchorEl: submenuAnchorEl, placement: "auto-end", onMouseEnter: handleSubmenuEnter, onMouseLeave: handleSubmenuLeave, modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [-4, 0],
+                        },
+                    },
+                    {
+                        name: 'preventOverflow',
+                        enabled: true,
+                    },
+                    {
+                        name: 'flip',
+                        enabled: true,
+                    },
+                ] }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: getHoveredSubmenu(), allCurrentSelected: allCurrentSelected, someCurrentSelected: someCurrentSelected, onSelectAll: handleSelectAll, onReset: handleReset, onColumnToggle: toggleColumnSelection, onNestedItemToggle: toggleNestedItem, anchorEl: submenuAnchorEl, isModified: isSubmenuModified }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: shouldDimNewCustomView, onClick: shouldDimNewCustomView ? undefined : handleSaveAsCustomView }, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "Save as a custom view" })), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "add", style: { width: 10, height: 10, opacity: shouldDimNewCustomView ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: shouldDimNewCustomView ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: handleCancel, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleOkay, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
 }
 export default React.memo(ViewsDropdown);

package/build/components/TableHeader/TableView/components/ColumnList.js

@@ -26,7 +26,16 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                         const isDate = isDateColumn(column.name);
                         const hasSubmenu = column.menuItems && column.menuItems.length > 0;
                         const { checked, indeterminate } = getColumnCheckState(column);
-                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }, style: { listStyle: 'none', margin: 0, padding: 0, position: 'relative', zIndex: 1, backgroundColor: '#fff' }, onDragStart: (e) => {
+                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1 }, style: {
+                                listStyle: 'none',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative',
+                                zIndex: 1,
+                                backgroundColor: '#fff',
+                                width: '100%',
+                                willChange: 'transform',
+                            }, onDragStart: (e) => {
                                 const target = e.target;
                                 if (target.closest('[role="checkbox"]') ||
                                     target.closest('input[type="checkbox"]') ||
@@ -37,7 +46,7 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                         if (e.target.closest('[role="checkbox"]') || e.target.closest('input[type="checkbox"]')) {
                                             e.stopPropagation();
                                         }
-                                    } }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: dragIcon, alt: "drag", draggable: false, style: { width: 16, height: 16, cursor: isDate ? 'default' : 'grab', pointerEvents: 'none' } }) }), _jsx(CheckboxWrapper, Object.assign({ onMouseDown: (e) => {
+                                    }, sx: { width: '100%', position: 'relative' } }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: dragIcon, alt: "drag", draggable: false, style: { width: 16, height: 16, cursor: isDate ? 'default' : 'grab', pointerEvents: 'none' } }) }), _jsx(CheckboxWrapper, Object.assign({ onMouseDown: (e) => {
                                                 e.stopPropagation();
                                             }, onPointerDown: (e) => {
                                                 e.stopPropagation();
@@ -46,7 +55,14 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                                     onColumnToggle(column.name);
                                                 }, onClick: (e) => {
                                                     e.stopPropagation();
-                                                }, disabled: isDate, size: "small", sx: checkboxSx }) })), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: column.label || column.name })), hasSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', ml: 1, flexShrink: 0 } }, { children: _jsx("img", { src: rightArrow, alt: "arrow", style: { width: 12, height: 12 } }) })))] })), hasSubmenu && (_jsx(Popper, Object.assign({ open: hoveredColumn === column.name, anchorEl: anchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
+                                                }, disabled: isDate, size: "small", sx: checkboxSx }) })), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: column.label || column.name })), hasSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', ml: 1, flexShrink: 0 } }, { children: _jsx("img", { src: rightArrow, alt: "arrow", style: { width: 12, height: 12 } }) })))] })), hasSubmenu && (_jsx(Popper, Object.assign({ open: hoveredColumn === column.name, anchorEl: anchorEl, placement: "right-start", sx: { zIndex: 10000 }, modifiers: [
+                                        {
+                                            name: 'offset',
+                                            options: {
+                                                offset: [0, 0],
+                                            },
+                                        },
+                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
                                                     var _a, _b;
                                                     return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
                                                 }) })] })) })))] }), column.name));

package/build/components/TableHeader/TableView/components/ViewsSubmenu.js

@@ -37,7 +37,14 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
                                             width: '100%',
-                                        } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, onClick: () => onColumnToggle(column.name), sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
+                                        } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, onClick: () => onColumnToggle(column.name), sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 }, modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [0, 0],
+                                                },
+                                            },
+                                        ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
                                                         var _a, _b;
                                                         return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onNestedItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
                                                     }) })] })) })))] })), columnIndex < columns.length - 1 && _jsx(Divider, {})] }, column.name));

package/build/components/TableHeader/TableView/constants.d.ts

@@ -5,6 +5,6 @@ export declare const MAX_CUSTOM_VIEWS = 3;
 export declare const TEMPLATE_NAME_MAX_LENGTH = 20;
 export declare const DATE_COLUMN_CONFIG: {
     readonly name: "date";
-    readonly label: "Date & Time";
+    readonly label: "Date";
     readonly selected: true;
 };

package/build/components/TableHeader/TableView/constants.js

@@ -5,6 +5,6 @@ export const MAX_CUSTOM_VIEWS = 3;
 export const TEMPLATE_NAME_MAX_LENGTH = 20;
 export const DATE_COLUMN_CONFIG = {
     name: 'date',
-    label: 'Date & Time',
+    label: 'Date',
     selected: true,
 };

package/build/components/TableHeader/TableView/hooks/useCreateViewDialog.js

@@ -3,12 +3,13 @@ import { DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from '../constants';
 import { initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, resetColumnsToDefault, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, } from '../utils';
 import { useSubmenuHover } from './useSubmenuHover';
 export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, editingView, tableViews = [] }) => {
-    const [templateName, setTemplateName] = useState('');
+    const [templateName, setTemplateName] = useState(() => (editingView === null || editingView === void 0 ? void 0 : editingView.label) || '');
     const [selectedColumns, setSelectedColumns] = useState([]);
     const previousOpenRef = useRef(false);
     const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
     const dateColumn = DATE_COLUMN_CONFIG;
     useEffect(() => {
+        var _a, _b;
         if (!open) {
             previousOpenRef.current = false;
             return;
@@ -16,9 +17,15 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
         const wasClosed = !previousOpenRef.current;
         if (wasClosed && open) {
             if (editingView) {
-                const otherColumns = initializeEditingColumns(defaultColumns, availableColumns);
+                // Use the saved submenu from editingView if available, otherwise fall back to defaultColumns
+                const savedColumns = editingView.submenu && editingView.submenu.length > 0
+                    ? editingView.submenu
+                    : defaultColumns;
+                const otherColumns = initializeEditingColumns(savedColumns, availableColumns);
                 setSelectedColumns([dateColumn, ...otherColumns]);
-                setTemplateName(editingView.label);
+                // Ensure templateName is set to editingView.label (fallback to empty string if undefined)
+                const nameToSet = ((_a = editingView.label) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+                setTemplateName(nameToSet);
             }
             else {
                 const otherColumns = tableViews && tableViews.length > 0
@@ -28,12 +35,17 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
                 setTemplateName('');
             }
         }
+        else if (open && editingView) {
+            // Update templateName when editingView changes while dialog is open
+            const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            setTemplateName(nameToSet);
+        }
         previousOpenRef.current = open;
-    }, [open, editingView, availableColumns, defaultColumns, tableViews, dateColumn]);
+    }, [open, editingView === null || editingView === void 0 ? void 0 : editingView.id, editingView === null || editingView === void 0 ? void 0 : editingView.label, editingView === null || editingView === void 0 ? void 0 : editingView.submenu, availableColumns, defaultColumns, tableViews, dateColumn]);
     const columnNames = useMemo(() => selectedColumns.map((col) => col.name), [selectedColumns]);
     const allSelected = useMemo(() => areAllColumnsSelected(selectedColumns), [selectedColumns]);
     const someSelected = useMemo(() => areSomeColumnsSelected(selectedColumns, allSelected), [selectedColumns, allSelected]);
-    const isNameValid = isValidTemplateName(templateName, TEMPLATE_NAME_MAX_LENGTH);
+    const isNameValid = useMemo(() => isValidTemplateName(templateName, TEMPLATE_NAME_MAX_LENGTH), [templateName]);
     const handleReorder = (reorderedNames) => {
         const reorderedColumns = reorderedNames
             .map((name) => selectedColumns.find((col) => col.name === name))

package/build/components/TableHeader/TableView/hooks/useViewSelector.d.ts

@@ -4,6 +4,7 @@ import type { ViewMenuItem, LayoutSection, ViewMode } from '../types';
 import type { ViewOption } from '../../type';
 export interface UseViewSelectorProps {
     mode: ViewMode;
+    onViewChange?: (selectedView?: ViewMenuItem) => void;
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
     onCreateCustomView?: (data: {
@@ -25,10 +26,11 @@ export interface UseViewSelectorProps {
     tableViews: ColumnViewProps[];
     customViews: ViewMenuItem[];
     defaultColumns: ColumnViewProps[];
+    defaultTemplate?: ViewMenuItem;
     setInternalCustomViews: (views: ViewMenuItem[]) => void;
     setInternalTableViews: (views: ColumnViewProps[]) => void;
 }
-export declare const useViewSelector: ({ mode, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, setInternalCustomViews, setInternalTableViews, }: UseViewSelectorProps) => {
+export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, }: UseViewSelectorProps) => {
     anchorViewEl: HTMLDivElement | null;
     defaultViewEl: HTMLDivElement | null;
     setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
@@ -39,7 +41,7 @@ export declare const useViewSelector: ({ mode, onTableViewsChange, onCustomViews
     handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
     handleCloseViewDropdown: () => void;
     handleClose: () => void;
-    handleSelectedViewInfo: (selected: ViewOption) => void;
+    handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
     handleOpenCreateDialog: (useCurrentState?: boolean) => void;
     handleOpenEditDialog: (view: ViewMenuItem) => void;
     handleCloseCreateDialog: () => void;

package/build/components/TableHeader/TableView/hooks/useViewSelector.js

@@ -7,15 +7,50 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { createCustomViewMenuItem } from '../utils';
-export const useViewSelector = ({ mode, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, setInternalCustomViews, setInternalTableViews, }) => {
+export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, }) => {
     const [anchorViewEl, setAnchorViewEl] = useState(null);
     const [defaultViewEl, setDefaultViewElement] = useState(null);
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
     const [editingView, setEditingView] = useState(null);
     const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
     const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
+    const [selectedView, setSelectedView] = useState(undefined);
+    // Update editingView when customViews changes to ensure it reflects the latest saved state
+    useEffect(() => {
+        if (editingView && customViews.length > 0) {
+            const updatedView = customViews.find((view) => view.id === editingView.id);
+            if (updatedView && updatedView !== editingView) {
+                setEditingView(updatedView);
+            }
+        }
+    }, [customViews, editingView]);
+    // Update selectedView when customViews changes to ensure it reflects the latest saved state
+    useEffect(() => {
+        if (selectedView && selectedView.isCustom && customViews.length > 0) {
+            const updatedView = customViews.find((view) => view.id === selectedView.id);
+            if (updatedView) {
+                // Compare submenu to detect changes (deep comparison would be better, but this works for now)
+                const submenuChanged = JSON.stringify(updatedView.submenu) !== JSON.stringify(selectedView.submenu);
+                const labelChanged = updatedView.label !== selectedView.label;
+                if (submenuChanged || labelChanged) {
+                    // Create a new object reference to ensure React detects the change
+                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined });
+                    setSelectedView(newSelectedView);
+                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+                }
+            }
+        }
+    }, [customViews, selectedView, onViewChange]);
+    // Notify parent of initial view on mount
+    useEffect(() => {
+        // Use defaultTemplate if available, otherwise undefined (built-in default view)
+        const initialView = defaultTemplate || undefined;
+        console.log('initialView', initialView);
+        setSelectedView(initialView);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(initialView);
+    }, [onViewChange, defaultTemplate]);
     const handleTableViewsChange = useCallback((newTableViews) => {
         const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
         setTableViewsState(newTableViews);
@@ -37,10 +72,15 @@ export const useViewSelector = ({ mode, onTableViewsChange, onCustomViewsChange,
         setDefaultViewElement(null);
         setSelectedViewInfo({ label: 'Default', id: 'default' });
     }, []);
-    const handleSelectedViewInfo = useCallback((selected) => {
+    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
         setSelectedViewInfo(selected);
+        // Update selected view and notify parent
+        const newSelectedView = viewMenuItem || undefined;
+        console.log('newSelectedView', newSelectedView);
+        setSelectedView(newSelectedView);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
         handleCloseViewDropdown();
-    }, [handleCloseViewDropdown]);
+    }, [handleCloseViewDropdown, onViewChange]);
     const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
         setEditingView(null);
         setShouldUseCurrentState(useCurrentState);
@@ -58,24 +98,51 @@ export const useViewSelector = ({ mode, onTableViewsChange, onCustomViewsChange,
         setShouldUseCurrentState(false);
     }, []);
     const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
-        if (editingView) {
-            const updatedViews = customViews.map((view) => view.id === editingView.id
-                ? Object.assign(Object.assign({}, view), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns }) : view);
-            handleCustomViewsChange(updatedViews);
-            yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(editingView.id, data));
+        try {
+            if (editingView) {
+                yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(editingView.id, data));
+                // Update state after promise resolves successfully
+                const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns });
+                const updatedViews = customViews.map((view) => (view.id === editingView.id ? updatedView : view));
+                handleCustomViewsChange(updatedViews);
+                // If the updated view is currently selected, update selectedView to reflect changes
+                // Create a new object reference to ensure React detects the change
+                if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === editingView.id) {
+                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: [...updatedView.submenu] });
+                    setSelectedView(newSelectedView);
+                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+                }
+            }
+            else {
+                yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+                // Update state after promise resolves successfully
+                const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
+                const updatedViews = [...customViews, newView];
+                handleCustomViewsChange(updatedViews);
+            }
         }
-        else {
-            const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
-            const updatedViews = [...customViews, newView];
-            handleCustomViewsChange(updatedViews);
-            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+        catch (error) {
+            // Error will be handled by the toast in CreateViewDialog
+            throw error;
         }
-    }), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView]);
+    }), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView, selectedView, onViewChange]);
     const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
-        const updatedViews = customViews.filter((view) => view.id !== viewId);
-        handleCustomViewsChange(updatedViews);
-        yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(viewId));
-    }), [customViews, handleCustomViewsChange, onDeleteCustomView]);
+        try {
+            yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(viewId));
+            // Update state after promise resolves successfully
+            const updatedViews = customViews.filter((view) => view.id !== viewId);
+            handleCustomViewsChange(updatedViews);
+            // If the deleted view was selected, reset to default
+            if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId) {
+                setSelectedView(undefined);
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
+            }
+        }
+        catch (error) {
+            // Error will be handled by the toast in CreateViewDialog
+            throw error;
+        }
+    }), [customViews, handleCustomViewsChange, onDeleteCustomView, selectedView, onViewChange]);
     const handleResetViews = useCallback((views) => {
         if (resetTableViews) {
             resetTableViews({ id: views[0], label: views[0] });

package/build/components/TableHeader/TableView/hooks/useViewsManager.d.ts

@@ -8,4 +8,5 @@ export declare const useViewsManager: ({ mode, templates, lang }: UseViewsManage
     setInternalTableViews: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
     internalCustomViews: ViewMenuItem[];
     setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
+    defaultTemplate: ViewMenuItem | undefined;
 };

package/build/components/TableHeader/TableView/hooks/useViewsManager.js

@@ -1,13 +1,14 @@
 import { useState, useEffect, useMemo } from 'react';
-import { transformTemplatesToViewMenuItems, getLayoutDataFromTemplates, getColumnsByMode } from '../utils';
+import { transformTemplatesToViewMenuItems } from '../utils';
 export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
     // Transform templates internally - this is the only source of data
     const transformedTemplates = useMemo(() => {
         if (!templates)
             return null;
         const templatesArray = Array.isArray(templates) ? templates : templates.templates;
-        const { customViews, defaultTemplateColumns } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
-        // Use default template columns if available, otherwise use layoutData from all templates
+        const { customViews, defaultTemplateColumns, defaultTemplate } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
+        // Only use default template columns - no fallback to layout data
+        // The default view must come from a template with default: true
         const effectiveLayoutData = defaultTemplateColumns
             ? [
                 {
@@ -31,11 +32,12 @@ export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
                     }),
                 },
             ]
-            : getLayoutDataFromTemplates(templatesArray);
+            : [];
         return {
             customViews,
             layoutData: effectiveLayoutData,
             defaultTemplateColumns,
+            defaultTemplate,
         };
     }, [templates, mode, lang]);
     const [defaultColumns, setDefaultColumns] = useState(() => {
@@ -71,23 +73,18 @@ export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
         return [];
     });
     useEffect(() => {
-        // Only use data from templates
+        // Only use default template columns from template with default: true
+        // No fallback to layout data - default must come from templates array
         if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns) {
             setDefaultColumns(transformedTemplates.defaultTemplateColumns);
             setInternalTableViews(transformedTemplates.defaultTemplateColumns);
         }
-        else if ((transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData) && transformedTemplates.layoutData.length > 0) {
-            // Use layoutData from templates
-            const columns = getColumnsByMode(mode, transformedTemplates.layoutData);
-            setDefaultColumns(columns);
-            setInternalTableViews(columns);
-        }
         else {
-            // No templates - set empty arrays
+            // No default template found - set empty arrays
             setDefaultColumns([]);
             setInternalTableViews([]);
         }
-    }, [mode, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData]);
+    }, [mode, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns]);
     // Update custom views when templates change
     useEffect(() => {
         if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) {
@@ -104,5 +101,6 @@ export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
         setInternalTableViews,
         internalCustomViews,
         setInternalCustomViews,
+        defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
     };
 };

package/build/components/TableHeader/TableView/types.d.ts

@@ -76,7 +76,6 @@ export interface CreateCustomViewDialogProps {
         layout: LayoutSection;
     }) => Promise<void>;
     availableColumns?: ColumnViewProps[];
-    isLoading?: boolean;
     defaultColumns?: ColumnViewProps[];
     editingView?: {
         id: string;
@@ -122,8 +121,8 @@ export interface ViewSelectorProps {
 export interface ViewsDropdownProps {
     open: boolean;
     selectedViewInfo: ViewOption;
-    setSelectedViewInfo: (selected: ViewOption) => void;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>, templateId?: string) => void;
+    setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>, selectedView?: ViewMenuItem) => void;
     setViews?: (views: string[]) => void;
     anchorEl: Element | null;
     tableViews?: ColumnViewProps[];

package/build/components/TableHeader/TableView/utils.d.ts

@@ -36,6 +36,7 @@ export declare const transformTemplatesToViewMenuItems: (templates: Array<{
 }>, mode?: ViewMode, lang?: string) => {
     customViews: ViewMenuItem[];
     defaultTemplateColumns?: ColumnViewProps[] | undefined;
+    defaultTemplate?: ViewMenuItem | undefined;
 };
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests
@@ -91,6 +92,7 @@ export declare const deepCloneColumns: (columns: ColumnViewProps[]) => ColumnVie
 export declare const toggleSingleColumn: (columns: ColumnViewProps[], columnName: string) => ColumnViewProps[];
 /**
  * Get submenu items for a view menu item
+ * Always includes the date column at the beginning
  */
 export declare const getSubmenuItems: (item: ViewMenuItem, defaultColumns: ColumnViewProps[]) => ColumnViewProps[];
 /**

package/build/components/TableHeader/TableView/utils.js

@@ -1,3 +1,4 @@
+import { DATE_COLUMN_CONFIG } from './constants';
 // Note: advancedColumns and sheetColumns are only used in demo - not imported here to avoid default data
 /**
  * Transform API layout response to internal ColumnViewProps format
@@ -99,6 +100,7 @@ export const setViewAsDefault = (views, viewId) => {
 export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lang = 'en') => {
     const customViews = [];
     let defaultTemplateColumns;
+    let defaultTemplate;
     templates.forEach((template) => {
         // Get columns for the specified mode
         const section = template.layout.find((s) => s.code.toLowerCase() === mode.toLowerCase());
@@ -106,9 +108,27 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
         // Handle id as either string or object
         const templateIdString = typeof template.id === 'string' ? template.id : template.templateId;
         const viewId = typeof template.id === 'string' ? template.id : template.templateId;
+        // Always include date column at the beginning
+        const dateColumn = DATE_COLUMN_CONFIG;
+        const columnsWithDate = columns.some((col) => col.name.toLowerCase() === 'date') ? columns : [dateColumn, ...columns];
+        // Ensure date column is first
+        const dateColumnIndex = columnsWithDate.findIndex((col) => col.name.toLowerCase() === 'date');
+        const finalColumns = dateColumnIndex > 0
+            ? [columnsWithDate[dateColumnIndex], ...columnsWithDate.filter((col) => col.name.toLowerCase() !== 'date')]
+            : columnsWithDate;
         if (template.default) {
             // Store default template columns to merge into built-in Default view
-            defaultTemplateColumns = columns;
+            defaultTemplateColumns = finalColumns;
+            // Also create a ViewMenuItem for the default template
+            defaultTemplate = {
+                id: 'default',
+                templateId: template.templateId,
+                label: template.name,
+                isCustom: false,
+                default: true,
+                columns: finalColumns.map((col) => col.name),
+                submenu: finalColumns,
+            };
         }
         else {
             // Add non-default templates as custom views
@@ -118,12 +138,12 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
                 label: template.name,
                 isCustom: true,
                 default: false,
-                columns: columns.map((col) => col.name),
-                submenu: columns,
+                columns: finalColumns.map((col) => col.name),
+                submenu: finalColumns,
             });
         }
     });
-    return { customViews, defaultTemplateColumns };
+    return { customViews, defaultTemplateColumns, defaultTemplate };
 };
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests
@@ -310,16 +330,38 @@ export const toggleSingleColumn = (columns, columnName) => {
 };
 /**
  * Get submenu items for a view menu item
+ * Always includes the date column at the beginning
  */
 export const getSubmenuItems = (item, defaultColumns) => {
     var _a;
+    let columns = [];
     if (item.isCustom && ((_a = item.submenu) === null || _a === void 0 ? void 0 : _a.length)) {
-        return item.submenu;
+        columns = item.submenu;
+    }
+    else if (item.id === 'default') {
+        columns = defaultColumns;
     }
-    if (item.id === 'default') {
-        return defaultColumns;
+    else {
+        columns = item.submenu || [];
     }
-    return item.submenu || [];
+    // Always include date column at the beginning if it's not already present
+    const hasDateColumn = columns.some((col) => col.name.toLowerCase() === 'date');
+    if (!hasDateColumn) {
+        const dateColumn = {
+            name: 'date',
+            label: 'Date',
+            selected: true,
+        };
+        return [dateColumn, ...columns];
+    }
+    // Ensure date column is first
+    const dateColumnIndex = columns.findIndex((col) => col.name.toLowerCase() === 'date');
+    if (dateColumnIndex > 0) {
+        const dateColumn = columns[dateColumnIndex];
+        const otherColumns = columns.filter((col) => col.name.toLowerCase() !== 'date');
+        return [dateColumn, ...otherColumns];
+    }
+    return columns;
 };
 /**
  * Check if a view menu item has submenu

package/build/components/TableHeader/type.d.ts

@@ -23,7 +23,7 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
     calendarMode?: CalenderMode;
     onStatusChange?: <T extends IStatus>(status?: T) => void;
     onSearch?: (search: string) => void;
-    onViewChange?: (templateId?: string) => void;
+    onViewChange?: (selectedView?: ViewMenuItem) => void;
     onDateChange?: (date: Date | [Date, Date]) => void;
     tableReportsComponent?: React.ReactNode;
     tableFilterComponent?: React.ReactNode;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.372-test.2-test.3-test.4-test.5",
-  "testVersion": 5,
+  "version": "0.1.372-test.2-test.3-test.4-test.5-test.6-test.7",
+  "testVersion": 7,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",