@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

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

@@ -2,12 +2,10 @@ export { default } from './TableView';
 export { default as TableView } from './TableView';
 export { default as DefaultViews } from './DefaultViews';
 export { default as CustomViews } from './CustomViews';
-export { default as ViewSelector } from './ViewSelector';
+export { default as ViewsMenu } from './ViewsMenu';
 export { default as ViewsDropdown } from './ViewsDropdown';
 export { default as CreateViewDialog } from './CreateViewDialog';
 export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
-export { useSubmenuHover } from './hooks';
+export { useSubmenuHover, useViewsManager, useViewsMenu } from './hooks';
 export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
-// Note: defaultViewList, advancedColumns, sheetColumns are only exported for demo purposes
-// They should not be used as defaults in production - all data should come from API
 export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -350,18 +350,24 @@ export const ResetCheckboxSx = {
 };
 export const SubmenuContainer = styled(Box)(() => ({
     minWidth: 200,
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '80vh',
+    overflow: 'hidden',
 }));
 export const ColumnItemsContainer = styled(Box)(() => ({
-    maxHeight: 300,
+    flex: 1,
     overflowY: 'auto',
     paddingLeft: 6,
     paddingRight: 6,
+    minHeight: 0,
 }));
 export const SaveCustomViewBox = styled(Box)(() => ({
     paddingLeft: 8,
     paddingRight: 8,
     paddingTop: 8,
     paddingBottom: 8,
+    flexShrink: 0,
 }));
 export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
     width: '100%',
@@ -376,7 +382,7 @@ export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
     cursor: disabled ? 'not-allowed' : 'pointer',
     opacity: disabled ? 0.5 : 1,
 }));
-export const ButtonsContainer = styled(Box)(() => ({
+export const ButtonsContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-end',
     gap: 12,
@@ -384,6 +390,9 @@ export const ButtonsContainer = styled(Box)(() => ({
     paddingBottom: 8,
     paddingLeft: 12,
     paddingRight: 12,
+    flexShrink: 0,
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
 }));
 export const CancelButtonSx = {
     fontSize: 11,

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

@@ -1,7 +1,5 @@
-/// <reference types="react" />
-import type { ColumnViewProps } from '../../../types/index.js';
+import type { ColumnViewProps, TableMode } from '../../../types/index.js';
 import type { TableHeaderProps, ViewOption } from '../type';
-export type ViewMode = 'advanced' | 'sheet';
 export interface ViewMenuItem {
     label: string;
     id: string;
@@ -34,7 +32,24 @@ export interface LayoutSection {
     code: string;
     columns: ColumnItem[];
 }
-export interface TemplateResponse {
+export interface TemplateAPIMetadata {
+    segment: string;
+    app: string;
+    service: string;
+    user: {
+        id: string;
+    };
+    master_template_id?: string;
+}
+export interface CreateTemplatePayload extends TemplateAPIMetadata {
+    name: string;
+    layout: LayoutSection[];
+}
+export interface UpdateTemplatePayload extends TemplateAPIMetadata {
+    name: string;
+    layout: LayoutSection[];
+}
+export interface Template {
     templateId: string;
     segment: string;
     app: string;
@@ -52,20 +67,15 @@ export interface TemplateResponse {
     created: number;
     updated: number;
     default: boolean;
-    object?: string;
-    master?: boolean;
-    live_mode?: boolean;
-    api_version?: string;
-    feature_version?: string;
 }
-export interface TemplatesListResponse {
+export interface TemplatesList {
     object: string;
     live_mode: boolean;
     api_version: string;
     feature_version: string;
     count: number;
     has_more: boolean;
-    templates: TemplateResponse[];
+    templates: Template[];
 }
 export interface CreateCustomViewDialogProps {
     open: boolean;
@@ -76,7 +86,6 @@ export interface CreateCustomViewDialogProps {
         layout: LayoutSection;
     }) => Promise<void>;
     availableColumns?: ColumnViewProps[];
-    isLoading?: boolean;
     defaultColumns?: ColumnViewProps[];
     editingView?: {
         id: string;
@@ -86,19 +95,14 @@ export interface CreateCustomViewDialogProps {
     } | null;
     onDelete?: (viewId: string) => Promise<void>;
     tableViews?: ColumnViewProps[];
-    mode?: ViewMode;
+    mode?: TableMode;
 }
 export interface ColumnCheckState {
     checked: boolean;
     indeterminate: boolean;
 }
-export interface ViewSelectorProps {
+export interface ViewsMenuProps {
     onViewChange?: TableHeaderProps['onViewChange'];
-    setIsViewVisible: (visible: boolean) => void;
-    setTableViews?: TableHeaderProps['setTableViews'];
-    tableViews?: TableHeaderProps['tableViews'];
-    resetTableViews?: TableHeaderProps['resetTableViews'];
-    customViews?: ViewMenuItem[];
     onCreateCustomView?: (data: {
         name: string;
         selectedColumns: ColumnViewProps[];
@@ -110,29 +114,26 @@ export interface ViewSelectorProps {
         layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
-    tableMode?: import('../../../types/index.js').TableMode;
-    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
-    initialTableViews?: ColumnViewProps[];
-    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
-    initialCustomViews?: ViewMenuItem[];
-    layoutData?: LayoutSection[];
-    templates?: TemplatesListResponse | TemplateResponse[];
+    tableMode?: TableMode;
+    templates: Template[];
     lang?: string;
 }
 export interface ViewsDropdownProps {
     open: boolean;
     selectedViewInfo: ViewOption;
     setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>, selectedView?: ViewMenuItem) => void;
-    setViews?: (views: string[]) => void;
     anchorEl: Element | null;
-    tableViews?: ColumnViewProps[];
-    setTableViews?: (columns: ColumnViewProps[]) => void;
+    defaultModified?: boolean;
+    onMarkDefaultModified?: () => void;
     onCreateCustomView?: (useCurrentState?: boolean) => void;
     customViews?: ViewMenuItem[];
     onEditCustomView?: (view: ViewMenuItem) => void;
+    onSaveDefaultColumns?: (columns: ColumnViewProps[]) => void;
     defaultColumns?: ColumnViewProps[];
     setDefaultColumns?: (columns: ColumnViewProps[]) => void;
+    updateSelectedView?: (view: ViewMenuItem) => void;
+    mode?: TableMode;
+    defaultTemplate?: ViewMenuItem;
 }
 export interface ColumnListProps {
     selectedColumns: ColumnViewProps[];
@@ -159,6 +160,7 @@ export interface ViewsSubmenuProps {
     onReset: () => void;
     onColumnToggle: (columnName: string) => void;
     onNestedItemToggle: (columnName: string, subItemName: string) => void;
+    onReorder: (reorderedColumnNames: string[]) => void;
     anchorEl: HTMLElement | null;
     isModified?: boolean;
 }
@@ -174,7 +176,7 @@ export interface UseCreateViewDialogProps {
     tableViews?: ColumnViewProps[];
 }
 export interface UseViewsManagerProps {
-    mode: ViewMode;
-    templates?: TemplatesListResponse | TemplateResponse[];
+    tableMode: TableMode;
+    templates: Template[];
     lang?: string;
 }

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

@@ -1,10 +1,10 @@
-import type { ColumnViewProps } from '../../../types/index.js';
-import type { LayoutSection, ViewMenuItem, ColumnCheckState, ViewMode } from './types';
+import type { ColumnViewProps, TableMode } from '../../../types/index.js';
+import type { LayoutSection, ViewMenuItem, ColumnCheckState } from './types';
 /**
  * Transform API layout response to internal ColumnViewProps format
  */
 export declare const transformLayoutToColumns: (layout: LayoutSection[], lang?: string) => ColumnViewProps[];
-export declare const getColumnsByMode: (mode: ViewMode, layoutData?: LayoutSection[]) => ColumnViewProps[];
+export declare const getColumnsByMode: (mode: TableMode, 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[], isDefault?: boolean) => ViewMenuItem;
@@ -33,7 +33,7 @@ export declare const transformTemplatesToViewMenuItems: (templates: Array<{
     default: boolean;
     layout: LayoutSection[];
     templateId: string;
-}>, mode?: ViewMode, lang?: string) => {
+}>, mode?: TableMode, lang?: string) => {
     customViews: ViewMenuItem[];
     defaultTemplateColumns?: ColumnViewProps[] | undefined;
     defaultTemplate?: ViewMenuItem | undefined;
@@ -41,7 +41,7 @@ export declare const transformTemplatesToViewMenuItems: (templates: Array<{
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests
  */
-export declare const convertColumnsToLayoutSection: (columns: ColumnViewProps[], mode: ViewMode, lang?: string) => LayoutSection;
+export declare const convertColumnsToLayoutSection: (columns: ColumnViewProps[], mode: TableMode, lang?: string) => LayoutSection;
 /**
  * Initialize columns for editing mode
  */
@@ -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
@@ -21,7 +22,7 @@ export const transformLayoutToColumns = (layout, lang = 'en') => {
             columns.push({
                 name: col.code,
                 label,
-                selected: (_d = col.default) !== null && _d !== void 0 ? _d : false,
+                selected: isDateColumn(col.code) ? true : (_d = col.default) !== null && _d !== void 0 ? _d : false,
                 menuItems: (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? menuItems : undefined,
             });
         });
@@ -30,7 +31,9 @@ export const transformLayoutToColumns = (layout, lang = 'en') => {
 };
 export const getColumnsByMode = (mode, layoutData) => {
     if (layoutData && layoutData.length > 0) {
-        const section = layoutData.find((s) => s.code.toLowerCase() === mode.toLowerCase());
+        // Map TableMode to layout section code: 'default' → 'Advanced', 'sheet' → 'Sheet'
+        const sectionCode = mode === 'sheet' ? 'sheet' : 'advanced';
+        const section = layoutData.find((s) => s.code.toLowerCase() === sectionCode);
         if (section) {
             return transformLayoutToColumns([section]);
         }
@@ -102,14 +105,24 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
     let defaultTemplate;
     templates.forEach((template) => {
         // Get columns for the specified mode
-        const section = template.layout.find((s) => s.code.toLowerCase() === mode.toLowerCase());
+        // Map TableMode to layout section code: 'default' → 'Advanced', 'sheet' → 'Sheet'
+        const sectionCode = mode === 'sheet' ? 'sheet' : 'advanced';
+        const section = template.layout.find((s) => s.code.toLowerCase() === sectionCode);
         const columns = section ? transformLayoutToColumns([section], lang) : [];
         // 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 +130,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 +142,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,
             });
         }
     });
@@ -163,8 +176,10 @@ export const convertColumnsToLayoutSection = (columns, mode, lang = 'en') => {
                 },
             ], order: index + 1, default: (_b = col.selected) !== null && _b !== void 0 ? _b : false }, (fieldItems && fieldItems.length > 0 && { fields: fieldItems }));
     });
+    // Map TableMode to layout section code: 'default' → 'Advanced', 'sheet' → 'Sheet'
+    const sectionCode = mode === 'sheet' ? 'Sheet' : 'Advanced';
     return {
-        code: mode === 'advanced' ? 'Advanced' : 'Sheet',
+        code: sectionCode,
         columns: columnItems,
     };
 };
@@ -314,6 +329,9 @@ export const toggleSingleColumn = (columns, columnName) => {
         var _a;
         if (col.name !== columnName)
             return col;
+        if (isDateColumn(col.name)) {
+            return Object.assign(Object.assign({}, col), { selected: true });
+        }
         const newSelected = !col.selected;
         const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
         return Object.assign(Object.assign({}, col), { selected: newSelected, menuItems: updatedMenuItems });
@@ -321,16 +339,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;
+    }
+    else {
+        columns = item.submenu || [];
     }
-    if (item.id === 'default') {
-        return defaultColumns;
+    // 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];
     }
-    return item.submenu || [];
+    // 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
@@ -374,6 +414,9 @@ export const areSomeCurrentColumnsSelected = (columns, allSelected) => {
 export const toggleAllCurrentColumns = (columns, shouldSelect) => {
     return columns.map((col) => {
         var _a;
+        if (isDateColumn(col.name)) {
+            return Object.assign(Object.assign({}, col), { selected: true });
+        }
         const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: shouldSelect })));
         return Object.assign(Object.assign({}, col), { selected: shouldSelect, menuItems: updatedMenuItems });
     });

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

@@ -6,3 +6,4 @@ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
 export { default as FiltersRow } from './FiltersRow';
 export * from './style';
 export * from './type';
+export type { Template, LayoutSection, ViewMenuItem } from './TableView/types';

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, LayoutSection } from './TableView/types';
+import type { ViewMenuItem, LayoutSection, Template } from './TableView/types';
 type ViewsOptions = {
     default: {};
     developer: {};
@@ -45,7 +45,6 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         id: string;
         label: string;
     }) => void;
-    customViews?: ViewMenuItem[];
     onCreateCustomView?: (data: {
         name: string;
         selectedColumns: ColumnViewProps[];
@@ -57,12 +56,7 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
-    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
-    initialTableViews?: ColumnViewProps[];
-    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
-    initialCustomViews?: ViewMenuItem[];
-    layoutData?: import('./TableView/types').LayoutSection[];
-    templates?: import('./TableView/types').TemplatesListResponse | import('./TableView/types').TemplateResponse[];
+    templates?: Template[];
     lang?: string;
     onToggleTextButtonClick?: () => void;
     children?: ReactNode;

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({ sx: { justifyContent: 'flex-end' }, 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("div", {})] })) })));
 }
 export default memo(Toolbar);

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -15,7 +15,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../constants/index.js';
 import { useDelayToSetValue } from '../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError, getProcessedColumns } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import TableHeader from '../components/TableHeader';
 import TableLastItem from '../components/TableLastItem';
@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton = false, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -58,7 +58,8 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const tableEmpty = !isLoading && rows.length === 0;
     const hasTimeoutError = isTimeoutError(error);
     const lastItemIndex = rows.length - 1;
-    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const processedColumns = useMemo(() => getProcessedColumns(columns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [columns, isLoading, defaultSkeleton]);
+    const shownColumns = useMemo(() => processedColumns.filter((column) => !column.hidden), [processedColumns]);
     const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
     const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;

package/build/constants/apps.js

@@ -492,4 +492,6 @@ export const MF_APPS_MAPPER = new Set([
     APP_CODES.payouts.code,
     APP_CODES.reports.code,
     APP_CODES.leads.code,
+    APP_CODES.wallet.code,
+    APP_CODES.authentication.code,
 ]);

package/build/constants/assets.d.ts

@@ -7,6 +7,7 @@ export declare const getPaymentMethodsIcon: (source: string) => string;
 export declare const getPaymentIssuersIcon: (source: string) => string;
 export declare const getCountriesIcon: (source: string) => string;
 export declare const getServiceFunctionIcon: (functionCode: string) => string;
+export declare const getStatusIcon: (statusCode: string) => string;
 export declare const getCurrenciesIcon: (currency: string) => string;
 export declare const getAuthorityIcon: (authority: string) => string;
 export declare const SARIconImage: string;

package/build/constants/assets.js

@@ -9,6 +9,7 @@ export const getPaymentMethodsIcon = (source) => `${lightUrl}/payment-method/v2/
 export const getPaymentIssuersIcon = (source) => `${lightUrl}/payment-issuer/${source}.svg`;
 export const getCountriesIcon = (source) => `${lightUrl}/country/v3/${source}.svg`;
 export const getServiceFunctionIcon = (functionCode) => `${lightUrl}/function/${functionCode}.svg`;
+export const getStatusIcon = (statusCode) => `${lightUrl}/statusIcons/${statusCode}.svg`;
 export const getCurrenciesIcon = (currency) => `${cdnUrl}/currency/v3/light/${currency}.svg`;
 export const getAuthorityIcon = (authority) => {
     const authorityWithoutSpaces = authority.replace(/\s/g, '');

package/build/types/reports.d.ts

@@ -4,3 +4,24 @@ export declare enum ReportStatusEnum {
     PROCESSING = "PROCESSING",
     INITIATED = "INITIATED"
 }
+export interface Report {
+    id: string;
+    object: string;
+    live_mode: boolean;
+    api_version: string;
+    feature_version: string;
+    type: string;
+    status: string;
+    segment_id: string;
+    created_at: number;
+    started_at: number;
+    completed_at: number;
+    total_records: number;
+    result_file: string;
+    download_count: string;
+    last_downloaded_at: number;
+    response: {
+        code: string;
+        message: string;
+    };
+}

package/build/types/table.d.ts

@@ -116,6 +116,7 @@ export interface IVirtualTable<R = any> {
     headerProps?: TableHeadProps;
     isLoading?: boolean;
     isFetchingNextPage?: boolean;
+    defaultSkeleton?: boolean;
     rowProps?: TableRowProps & {
         onRowClick?: (row: R, index: number) => void;
     };

package/build/utils/date.js

@@ -69,9 +69,11 @@ export const formatUTCOffset = (offset = 0) => {
  * @returns - Array of two dates [startDate, endDate]
  */
 export const getDefaultDateRange = (startDay = 6) => {
-    const monthDaysMinus = dayjs().subtract(startDay, 'day').hour(0).minute(0).second(0).toDate();
-    const today = dayjs(new Date()).hour(23).minute(59).second(59).toDate();
-    return [monthDaysMinus, today];
+    const safeDays = Number.isFinite(startDay) && startDay >= 0 ? startDay : 0;
+    const now = dayjs();
+    const start = now.subtract(safeDays, 'day').startOf('day');
+    const end = now.endOf('day');
+    return [start.toDate(), end.toDate()];
 };
 export const getUTCTimestamp = (date) => {
     // Create a Date object with the local date string

package/build/utils/index.d.ts

@@ -45,3 +45,4 @@ export * from './boolean';
 export * from './columnResizeStorage';
 export * from './timezone';
 export * from './merchantSource';
+export * from './skeletonColumns';

package/build/utils/index.js

@@ -45,3 +45,4 @@ export * from './boolean';
 export * from './columnResizeStorage';
 export * from './timezone';
 export * from './merchantSource';
+export * from './skeletonColumns';

package/build/utils/skeletonColumns.d.ts

@@ -0,0 +1,4 @@
+import type { IColumnProps } from '../types/index.js';
+export declare const DEFAULT_SKELETON_WIDTHS: string[];
+export declare const generateSkeletonColumns: (staticWidths?: string[]) => IColumnProps[];
+export declare const getProcessedColumns: <T = any>(columns: readonly IColumnProps<T>[], isLoading: boolean, defaultSkeleton: boolean) => IColumnProps<T>[];

package/build/utils/skeletonColumns.js

@@ -0,0 +1,17 @@
+export const DEFAULT_SKELETON_WIDTHS = ['120px', '180px', '100px', '150px', '200px', '140px', '160px', '110px', '190px', '130px'];
+export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS) => {
+    return staticWidths.map((width, index) => ({
+        id: `skeleton-col-${index}`,
+        header: '',
+        width,
+        order: index,
+        hidden: false,
+        sortable: false,
+    }));
+};
+export const getProcessedColumns = (columns, isLoading, defaultSkeleton) => {
+    if (defaultSkeleton && isLoading) {
+        return generateSkeletonColumns();
+    }
+    return [...columns];
+};

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",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { ViewSelectorProps } from './types';
-declare function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, onTableViewsChange, onCustomViewsChange, templates, lang, }: ViewSelectorProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof ViewSelector>;
-export default _default;