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

package/build/components/Sandbox/style.js

@@ -11,8 +11,10 @@ export const StyledContainer = styled(Box, {
 }));
 export const SandBoxWrapper = styled(Box)(() => ({
     display: 'flex',
-    justifyContent: 'flex-end',
+    flexDirection: 'row-reverse',
+    justifyContent: 'flex-start',
     alignItems: 'center',
+    gap: '0.25rem',
 }));
 export const StyledImage = styled('img')(() => ({
     height: '0.75rem',
@@ -38,7 +40,6 @@ export const StyledText = styled('p', {
     color: theme.palette.common.orange,
     fontSize: '0.62rem',
     fontWeight: 600,
-    paddingRight: '0.25rem',
     opacity: isContentHovered ? 1 : 0,
     display: isContentHovered ? 'block' : 'none',
     transition: 'opacity 0.2s ease-in-out',

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, }: Readonly<CreateCustomViewDialogProps>): import("react/jsx-runtime").JSX.Element | null;
+declare function CreateViewDialog({ open, onClose, onCreate, availableColumns, isLoading, defaultColumns, editingView, onDelete, tableViews, mode, }: Readonly<CreateCustomViewDialogProps>): import("react/jsx-runtime").JSX.Element | null;
 export default CreateViewDialog;

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

@@ -19,7 +19,8 @@ import { DialogContentWrapper, ScrollableContent, TitleSection, FooterBar, Creat
 import { DIALOG_WIDTH, DIALOG_HEIGHT } from './constants';
 import { useCreateViewDialog } from './hooks';
 import { ColumnList } from './components/ColumnList';
-function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLoading = false, defaultColumns = [], editingView, onDelete, tableViews = [], }) {
+import { convertColumnsToLayoutSection } from './utils';
+function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLoading = false, defaultColumns = [], editingView, onDelete, tableViews = [], mode = 'sheet', }) {
     const { t } = useTranslation();
     const { templateName, setTemplateName, selectedColumns, columnNames, allSelected, someSelected, isNameValid, hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose, handleReorder, handleColumnToggle, handleSubItemToggle, handleSelectAll, handleResetToDefault, } = useCreateViewDialog({
         open,
@@ -32,7 +33,8 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLo
         if (!isNameValid)
             return;
         const columnsToCreate = selectedColumns.filter((col) => col.selected);
-        yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate }));
+        const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
+        yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
         onClose();
     });
     const handleDelete = () => __awaiter(this, void 0, void 0, function* () {

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

@@ -22,7 +22,17 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
     const [baselineColumns, setBaselineColumns] = React.useState([]);
     const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
     const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
-    const viewList = [...defaultViewList, ...customViews];
+    // Sort custom views: default first, then others
+    const sortedCustomViews = useMemo(() => {
+        return [...customViews].sort((a, b) => {
+            if (a.default && !b.default)
+                return -1;
+            if (!a.default && b.default)
+                return 1;
+            return 0;
+        });
+    }, [customViews]);
+    const viewList = [...defaultViewList, ...sortedCustomViews];
     const toggleColumnSelection = (columnName) => {
         if (!setDefaultColumns)
             return;
@@ -42,6 +52,17 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
         return item ? getSubmenuItems(item, defaultColumns) : [];
     };
     const currentSubmenuColumns = useMemo(() => getHoveredSubmenu(), [hoveredItem, defaultColumns, viewList]);
+    const originalSubmenuColumns = useMemo(() => {
+        if (!hoveredItem || originalColumns.length === 0)
+            return [];
+        const item = viewList.find((i) => i.id === hoveredItem);
+        return item ? getSubmenuItems(item, originalColumns) : [];
+    }, [hoveredItem, originalColumns, viewList]);
+    const isSubmenuModified = useMemo(() => {
+        if (originalSubmenuColumns.length === 0)
+            return true;
+        return !areColumnsEqual(currentSubmenuColumns, originalSubmenuColumns);
+    }, [currentSubmenuColumns, originalSubmenuColumns]);
     const allCurrentSelected = useMemo(() => areAllCurrentColumnsSelected(currentSubmenuColumns), [currentSubmenuColumns]);
     const someCurrentSelected = useMemo(() => areSomeCurrentColumnsSelected(currentSubmenuColumns, allCurrentSelected), [currentSubmenuColumns, allCurrentSelected]);
     const handleSelectAll = () => {
@@ -126,7 +147,7 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
                             } }, { children: [item.id === selectedViewInfo.id ? (_jsx("img", { style: {
                                         width: 15,
                                         height: 15,
-                                    }, className: "check-icon", src: smallBlueCheckIcon, alt: "check" })) : (_jsx(Space, {})), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.id === 'default' && isDefaultModified && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
+                                    }, className: "check-icon", src: smallBlueCheckIcon, alt: "check" })) : (_jsx(Space, {})), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.id === 'default' && isDefaultModified && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" })), item.isCustom && item.default && _jsx("span", Object.assign({ style: Object.assign(Object.assign({}, ModifiedTextSx), { color: '#1F88D0', marginLeft: 4 }) }, { children: "(Default)" }))] })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
                                         e.stopPropagation();
                                         onSelect(e);
                                         onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(item);
@@ -143,6 +164,6 @@ 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 }), _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: "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" }))] })] }) })))] })));
 }
 export default React.memo(ViewsDropdown);

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useState } from 'react';
+import { memo, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { Icon, StyledButton } from '../../index.js';
@@ -39,6 +39,19 @@ function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableView
         onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
     };
     const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
+    // Auto-select default template when custom views are loaded
+    useEffect(() => {
+        if (customViews.length > 0) {
+            const defaultView = customViews.find((view) => view.default);
+            if (defaultView && selectedViewInfo.id === 'default') {
+                setSelectedViewInfo(defaultView);
+                if (defaultView.submenu) {
+                    handleTableViewsChange(defaultView.submenu);
+                }
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [customViews]);
     const handleCustomViewsChange = (newCustomViews) => {
         setInternalCustomViews(newCustomViews);
         onCustomViewsChange === null || onCustomViewsChange === void 0 ? void 0 : onCustomViewsChange(newCustomViews);
@@ -100,7 +113,7 @@ function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableView
                                     resetTableViews({ id: views[0], label: views[0] });
                                 }
                                 else {
-                                    const resetColumns = initialTableViews || getColumnsByMode(mode, layoutData);
+                                    const resetColumns = getColumnsByMode(mode, layoutData);
                                     handleTableViewsChange(resetColumns);
                                 }
                             }, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: (useCurrentState) => handleOpenCreateDialog(useCurrentState), 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 })] }));

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

@@ -26,7 +26,7 @@ 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, 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)' }, style: { listStyle: 'none', margin: 0, padding: 0, position: 'relative', zIndex: 1, backgroundColor: '#fff' }, onDragStart: (e) => {
                                 const target = e.target;
                                 if (target.closest('[role="checkbox"]') ||
                                     target.closest('input[type="checkbox"]') ||

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

@@ -6,14 +6,14 @@ import { blackRightArrowIcon } from '../../../../constants/index.js';
 import { getColumnCheckState } from '../utils';
 import { ResetHeaderBox, ResetCheckboxSx, ColumnItemsContainer, SubmenuPaper } from '../styles';
 import { useNestedSubmenu } from '../hooks/useNestedSubmenu';
-export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, anchorEl, }) => {
+export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, anchorEl, isModified = false, }) => {
     const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
-    return (_jsxs(_Fragment, { children: [_jsxs(ResetHeaderBox, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(Checkbox, { checked: allCurrentSelected, indeterminate: someCurrentSelected, onChange: (e) => {
-                                    e.stopPropagation();
-                                    onSelectAll();
-                                }, onClick: (e) => {
-                                    e.stopPropagation();
-                                }, sx: ResetCheckboxSx }), _jsx(Typography, Object.assign({ sx: { fontSize: 12, fontWeight: 500, color: 'text.primary' } }, { children: "Select All" }))] })), _jsx(Typography, Object.assign({ component: "button", onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(ResetHeaderBox, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: _jsx(Checkbox, { checked: allCurrentSelected, indeterminate: someCurrentSelected, onChange: (e) => {
+                                e.stopPropagation();
+                                onSelectAll();
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                            }, sx: ResetCheckboxSx }) })), _jsx(Typography, Object.assign({ component: "button", onClick: (e) => {
                             e.stopPropagation();
                             onReset();
                         }, sx: {
@@ -24,6 +24,7 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                             border: 'none',
                             cursor: 'pointer',
                             padding: 0,
+                            opacity: isModified ? 1 : 0.5,
                             '&:hover': {
                                 textDecoration: 'underline',
                             },

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

@@ -2,11 +2,14 @@ import { useState, useEffect } from 'react';
 import { getColumnsByMode } from '../utils';
 export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCustomViews }) => {
     const [defaultColumns, setDefaultColumns] = useState(() => getColumnsByMode(mode, layoutData));
-    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || []);
+    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || getColumnsByMode(mode, layoutData) || []);
     const [internalCustomViews, setInternalCustomViews] = useState(initialCustomViews || []);
     useEffect(() => {
         setDefaultColumns(getColumnsByMode(mode, layoutData));
-    }, [mode, layoutData]);
+        if (!initialTableViews && layoutData) {
+            setInternalTableViews(getColumnsByMode(mode, layoutData));
+        }
+    }, [mode, layoutData, initialTableViews]);
     return {
         defaultColumns,
         setDefaultColumns,

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

@@ -5,8 +5,8 @@ export { default as CustomViews } from './CustomViews';
 export { default as ViewsManager } from './ViewsManager';
 export { default as ViewsDropdown } from './ViewsDropdown';
 export { default as CreateViewDialog } from './CreateViewDialog';
-export type { ViewMenuItem, ViewMode, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem } from './types';
-export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, isDateColumn, getColumnCheckState } from './utils';
+export type { ViewMenuItem, ViewMode, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, TemplateResponse, TemplatesListResponse } from './types';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState } from './utils';
 export { useSubmenuHover, useDialogPosition } from './hooks';
 export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
 export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -5,7 +5,7 @@ export { default as CustomViews } from './CustomViews';
 export { default as ViewsManager } from './ViewsManager';
 export { default as ViewsDropdown } from './ViewsDropdown';
 export { default as CreateViewDialog } from './CreateViewDialog';
-export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, isDateColumn, getColumnCheckState } from './utils';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState } from './utils';
 export { useSubmenuHover, useDialogPosition } from './hooks';
 export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
 export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -8,6 +8,7 @@ export interface ViewMenuItem {
     columns?: string[];
     submenu?: ColumnViewProps[];
     isCustom?: boolean;
+    default?: boolean;
 }
 export interface FieldItem {
     code: string;
@@ -31,12 +32,41 @@ export interface LayoutSection {
     code: string;
     columns: ColumnItem[];
 }
+export interface TemplateResponse {
+    id: string;
+    object: string;
+    master: boolean;
+    live_mode: boolean;
+    api_version: string;
+    feature_version: string;
+    created: number;
+    updated: number;
+    segment: string;
+    app: string;
+    service: string;
+    user: {
+        id: string;
+    };
+    name: string;
+    default: boolean;
+    layout: LayoutSection[];
+}
+export interface TemplatesListResponse {
+    object: string;
+    live_mode: boolean;
+    api_version: string;
+    feature_version: string;
+    count: number;
+    has_more: boolean;
+    templates: TemplateResponse[];
+}
 export interface CreateCustomViewDialogProps {
     open: boolean;
     onClose: () => void;
     onCreate?: (data: {
         name: string;
         selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
     }) => Promise<void>;
     availableColumns?: ColumnViewProps[];
     isLoading?: boolean;
@@ -48,6 +78,7 @@ export interface CreateCustomViewDialogProps {
     } | null;
     onDelete?: (viewId: string) => Promise<void>;
     tableViews?: ColumnViewProps[];
+    mode?: ViewMode;
 }
 export interface ColumnCheckState {
     checked: boolean;
@@ -63,10 +94,12 @@ export interface ViewsManagerProps {
     onCreateCustomView?: (data: {
         name: string;
         selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
     }) => Promise<void>;
     onEditCustomView?: (viewId: string, data: {
         name: string;
         selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
     mode?: ViewMode;
@@ -117,6 +150,7 @@ export interface ViewsSubmenuProps {
     onColumnToggle: (columnName: string) => void;
     onNestedItemToggle: (columnName: string, subItemName: string) => void;
     anchorEl: HTMLElement | null;
+    isModified?: boolean;
 }
 export interface UseCreateViewDialogProps {
     open: boolean;

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

@@ -7,7 +7,25 @@ export declare const transformLayoutToColumns: (layout: LayoutSection[], lang?:
 export declare const getColumnsByMode: (mode: ViewMode, layoutData?: LayoutSection[]) => ColumnViewProps[];
 export declare const isDateColumn: (name: string) => boolean;
 export declare const getColumnCheckState: (column: ColumnViewProps) => ColumnCheckState;
-export declare const createCustomViewMenuItem: (name: string, selectedColumns: ColumnViewProps[]) => ViewMenuItem;
+export declare const createCustomViewMenuItem: (name: string, selectedColumns: ColumnViewProps[], isDefault?: boolean) => ViewMenuItem;
+/**
+ * Set a view as default and ensure only one view is default at a time
+ */
+export declare const setViewAsDefault: (views: ViewMenuItem[], viewId: string) => ViewMenuItem[];
+/**
+ * Transform API templates response to ViewMenuItem array
+ * Filters templates by mode and only shows the section matching the current mode
+ */
+export declare const transformTemplatesToViewMenuItems: (templates: Array<{
+    id: string;
+    name: string;
+    default: boolean;
+    layout: LayoutSection[];
+}>, mode?: ViewMode, lang?: string) => ViewMenuItem[];
+/**
+ * Convert ColumnViewProps back to LayoutSection format for API requests
+ */
+export declare const convertColumnsToLayoutSection: (columns: ColumnViewProps[], mode: ViewMode, lang?: string) => LayoutSection;
 /**
  * Initialize columns for editing mode
  */

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

@@ -51,13 +51,71 @@ export const getColumnCheckState = (column) => {
         indeterminate: selectedCount > 0 && selectedCount < column.menuItems.length,
     };
 };
-export const createCustomViewMenuItem = (name, selectedColumns) => ({
+export const createCustomViewMenuItem = (name, selectedColumns, isDefault = false) => ({
     label: name,
     id: `custom_${Date.now()}`,
     columns: selectedColumns.map((col) => col.name),
     submenu: selectedColumns,
     isCustom: true,
+    default: isDefault,
 });
+/**
+ * Set a view as default and ensure only one view is default at a time
+ */
+export const setViewAsDefault = (views, viewId) => {
+    return views.map((view) => (Object.assign(Object.assign({}, view), { default: view.id === viewId })));
+};
+/**
+ * Transform API templates response to ViewMenuItem array
+ * Filters templates by mode and only shows the section matching the current mode
+ */
+export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lang = 'en') => {
+    return templates.map((template) => {
+        // Get columns for the specified mode
+        const section = template.layout.find((s) => s.code.toLowerCase() === mode.toLowerCase());
+        const columns = section ? transformLayoutToColumns([section], lang) : [];
+        return {
+            id: template.id,
+            label: template.name,
+            isCustom: true,
+            default: template.default,
+            columns: columns.map((col) => col.name),
+            submenu: columns,
+        };
+    });
+};
+/**
+ * Convert ColumnViewProps back to LayoutSection format for API requests
+ */
+export const convertColumnsToLayoutSection = (columns, mode, lang = 'en') => {
+    const columnItems = columns.map((col, index) => {
+        var _a, _b;
+        const fieldItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((field) => {
+            var _a;
+            return ({
+                code: field.name,
+                name: [
+                    {
+                        text: typeof field.label === 'string' ? field.label : field.name,
+                        lang: lang || '',
+                    },
+                ],
+                default: (_a = field.selected) !== null && _a !== void 0 ? _a : false,
+            });
+        });
+        const columnLabel = typeof col.label === 'string' ? col.label : col.name;
+        return Object.assign({ code: col.name, name: [
+                {
+                    text: columnLabel,
+                    lang,
+                },
+            ], order: index + 1, default: (_b = col.selected) !== null && _b !== void 0 ? _b : false }, (fieldItems && fieldItems.length > 0 && { fields: fieldItems }));
+    });
+    return {
+        code: mode === 'advanced' ? 'Advanced' : 'Sheet',
+        columns: columnItems,
+    };
+};
 /**
  * Initialize columns for editing mode
  */
@@ -158,7 +216,8 @@ export const areAllColumnsSelected = (columns) => {
         nonDateColumns.every((col) => {
             var _a;
             if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
-                return col.menuItems.some((item) => item.selected);
+                // For columns with menuItems, all items must be selected
+                return col.menuItems.every((item) => item.selected);
             }
             return col.selected;
         }));
@@ -236,7 +295,8 @@ export const areAllCurrentColumnsSelected = (columns) => {
     return columns.every((col) => {
         var _a;
         if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
-            return col.menuItems.some((item) => item.selected);
+            // For columns with menuItems, all items must be selected
+            return col.menuItems.every((item) => item.selected);
         }
         return col.selected;
     });

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

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timezone, SegmentCountry } from '../../types/index.js';
 import { AvailableStatus } from '../StatusBar/type';
 import { PartialExcept } from '../../types/index.js';
-import type { ViewMenuItem } from './TableView/types';
+import type { ViewMenuItem, LayoutSection } from './TableView/types';
 type ViewsOptions = {
     default: {};
     developer: {};
@@ -49,10 +49,12 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
     onCreateCustomView?: (data: {
         name: string;
         selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
     }) => Promise<void>;
     onEditCustomView?: (viewId: string, data: {
         name: string;
         selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
     viewMode?: 'advanced' | 'sheet';

package/build/components/Toolbar/Toolbar.js

@@ -15,6 +15,6 @@ import { ToolbarStyled, StyledBox, ActionsBox } from './style';
 import WindowAppIcon from '../WindowAppIcon';
 function Toolbar(_a) {
     var { onMouseEnter, onMouseLeave, isMaximized, isHovered, children, rightActions, leftActions, title, icon } = _a, props = __rest(_a, ["onMouseEnter", "onMouseLeave", "isMaximized", "isHovered", "children", "rightActions", "leftActions", "title", "icon"]);
-    return (_jsx(ToolbarStyled, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "toolbar", isHovered: isHovered }, props, { children: _jsxs(StyledBox, Object.assign({ className: "toolbar-wrapper" }, { children: [leftActions ? _jsx(ActionsBox, Object.assign({ className: "action-box" }, { children: leftActions })) : _jsx("div", {}), _jsx(WindowAppIcon, { title: title, icon: icon }), rightActions ? _jsx(ActionsBox, Object.assign({ className: "action-box" }, { children: rightActions })) : _jsx("div", {})] })) })));
+    return (_jsx(ToolbarStyled, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "toolbar", isHovered: isHovered }, props, { children: _jsxs(StyledBox, Object.assign({ className: "toolbar-wrapper" }, { children: [leftActions ? _jsx(ActionsBox, Object.assign({ className: "action-box" }, { children: leftActions })) : _jsx("div", {}), _jsx(WindowAppIcon, { title: title, icon: icon }), rightActions ? (_jsx(ActionsBox, Object.assign({ sx: { justifyContent: 'flex-end' }, className: "action-box" }, { children: rightActions }))) : (_jsx("div", {}))] })) })));
 }
 export default memo(Toolbar);

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.371-test.1-test.2-test.3",
-  "testVersion": 3,
+  "version": "0.1.371-test.1-test.2-test.3-test.4-test.5-test.6-test.7",
+  "testVersion": 7,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",