@tap-payments/os-micro-frontend-shared 0.1.372-test.2-test.3-test.4-test.5-test.6 → 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/ViewsDropdown.js

@@ -186,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/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.js

@@ -17,10 +17,37 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
     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]);
@@ -49,6 +76,7 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
         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();
@@ -70,24 +98,51 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
         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/types.d.ts

@@ -76,7 +76,6 @@ export interface CreateCustomViewDialogProps {
         layout: LayoutSection;
     }) => Promise<void>;
     availableColumns?: ColumnViewProps[];
-    isLoading?: boolean;
     defaultColumns?: ColumnViewProps[];
     editingView?: {
         id: string;

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

@@ -92,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
@@ -107,9 +108,17 @@ 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',
@@ -117,8 +126,8 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
                 label: template.name,
                 isCustom: false,
                 default: true,
-                columns: columns.map((col) => col.name),
-                submenu: columns,
+                columns: finalColumns.map((col) => col.name),
+                submenu: finalColumns,
             };
         }
         else {
@@ -129,8 +138,8 @@ 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,
             });
         }
     });
@@ -321,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;
     }
-    if (item.id === 'default') {
-        return defaultColumns;
+    else if (item.id === 'default') {
+        columns = defaultColumns;
     }
-    return item.submenu || [];
+    else {
+        columns = 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/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-test.6",
-  "testVersion": 6,
+  "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",