@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/lib/hooks/use-display-locale.ts

@@ -0,0 +1,40 @@
+import { useUserSettings } from './use-user-settings.js';
+
+const rtlLanguageCodes = ['ar', 'he', 'fa', 'ur', 'ps'];
+
+/**
+ * @description
+ * Returns information about the current display language & region.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   bcp47Tag,
+ *   humanReadableLanguageAndLocale,
+ *   humanReadableLanguage,
+ *   isRTL,
+ * } = useDisplayLocale();
+ *
+ * console.log(bcp47Tag) // "en-GB"
+ * console.log(humanReadableLanguage) // "English"
+ * console.log(humanReadableLanguageAndLocale) // "British English"
+ * console.log(isRTL) // false
+ * ```
+ *
+ * @docsCategory hooks
+ * @docsPage useDisplayLocale
+ */
+export function useDisplayLocale() {
+    const { settings } = useUserSettings();
+    const language = settings.displayLanguage.replace(/[_-]/, '-');
+    const locale = settings.displayLocale;
+    const bcp47Tag = language.match(/[_-]/)
+        ? language.replace(/[_-]/, '-')
+        : [language, locale].filter(x => !!x).join('-');
+    const humanReadableLanguageAndLocale = new Intl.DisplayNames([bcp47Tag], { type: 'language' }).of(
+        bcp47Tag,
+    );
+    const isRTL = rtlLanguageCodes.includes(language);
+    const humanReadableLanguage = new Intl.DisplayNames([bcp47Tag], { type: 'language' }).of(language);
+    return { bcp47Tag, humanReadableLanguageAndLocale, humanReadableLanguage, isRTL };
+}

package/src/lib/hooks/use-dynamic-translations.ts

@@ -0,0 +1,46 @@
+import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
+import { useLingui } from '@lingui/react';
+
+export function useDynamicTranslations() {
+    const { i18n } = useLingui();
+
+    const getTranslatedFieldName = (fieldId: string) => {
+        const fieldNameTranslationId = `fieldName.${fieldId}`;
+        const translatedDisplay = i18n.t(fieldNameTranslationId);
+        return translatedDisplay !== fieldNameTranslationId
+            ? translatedDisplay
+            : camelCaseToTitleCase(fieldId);
+    };
+
+    const getTranslatedOrderState = (state: string) => {
+        const stateTranslationId = `orderState.${state}`;
+        const translatedDisplay = i18n.t(stateTranslationId);
+        return translatedDisplay !== stateTranslationId ? translatedDisplay : camelCaseToTitleCase(state);
+    };
+
+    const getTranslatedFulfillmentState = (state: string) => {
+        const stateTranslationId = `fulfillmentState.${state}`;
+        const translatedDisplay = i18n.t(stateTranslationId);
+        return translatedDisplay !== stateTranslationId ? translatedDisplay : camelCaseToTitleCase(state);
+    };
+
+    const getTranslatedPaymentState = (state: string) => {
+        const stateTranslationId = `paymentState.${state}`;
+        const translatedDisplay = i18n.t(stateTranslationId);
+        return translatedDisplay !== stateTranslationId ? translatedDisplay : camelCaseToTitleCase(state);
+    };
+
+    const getTranslatedRefundState = (state: string) => {
+        const stateTranslationId = `refundState.${state}`;
+        const translatedDisplay = i18n.t(stateTranslationId);
+        return translatedDisplay !== stateTranslationId ? translatedDisplay : camelCaseToTitleCase(state);
+    };
+
+    return {
+        getTranslatedFieldName,
+        getTranslatedOrderState,
+        getTranslatedFulfillmentState,
+        getTranslatedPaymentState,
+        getTranslatedRefundState,
+    };
+}

package/src/lib/hooks/use-extended-detail-query.ts

@@ -1,5 +1,5 @@
 import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { DocumentNode } from 'graphql';
 import { useEffect, useMemo, useRef } from 'react';
 import { toast } from 'sonner';

package/src/lib/hooks/use-extended-list-query.ts

@@ -1,6 +1,6 @@
 import { getListQueryDocuments } from '@/vdb/framework/data-table/data-table-extensions.js';
 import { extendDocument } from '@/vdb/framework/document-extension/extend-document.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { DocumentNode } from 'graphql';
 import { useEffect, useMemo, useRef } from 'react';
 import { toast } from 'sonner';
@@ -8,6 +8,11 @@ import { toast } from 'sonner';
 import { usePageBlock } from './use-page-block.js';
 import { usePage } from './use-page.js';
 
+/**
+ * @description
+ * Extends the given list query document with additional fields that can be
+ * supplied via the Dashboard Extension API.
+ */
 export function useExtendedListQuery<T extends DocumentNode>(listQuery: T) {
     const { pageId } = usePage();
     const { blockId } = usePageBlock() ?? {};

package/src/lib/hooks/use-local-format.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
+import { useDisplayLocale } from './use-display-locale.js';
 import { useServerConfig } from './use-server-config.js';
 
 /**
@@ -26,7 +27,8 @@ import { useServerConfig } from './use-server-config.js';
 export function useLocalFormat() {
     const { moneyStrategyPrecision } = useServerConfig() ?? { moneyStrategyPrecision: 2 };
     const precisionFactor = useMemo(() => Math.pow(10, moneyStrategyPrecision), [moneyStrategyPrecision]);
-    const locale = 'en';
+    const { bcp47Tag } = useDisplayLocale();
+    const locale = bcp47Tag;
 
     const toMajorUnits = useCallback(
         (value: number): number => {
@@ -119,6 +121,17 @@ export function useLocalFormat() {
         [locale],
     );
 
+    const formatRegionName = useCallback(
+        (value: string): string => {
+            try {
+                return new Intl.DisplayNames([locale], { type: 'region' }).of(value) ?? value;
+            } catch (e: any) {
+                return value;
+            }
+        },
+        [locale],
+    );
+
     const formatCurrencyName = useCallback(
         (currencyCode: string, display: 'full' | 'symbol' | 'name' = 'full'): string => {
             if (!currencyCode) return '';
@@ -154,6 +167,7 @@ export function useLocalFormat() {
         formatDate,
         formatRelativeDate,
         formatLanguageName,
+        formatRegionName,
         formatCurrencyName,
         toMajorUnits,
         toMinorUnits,

package/src/lib/hooks/use-saved-views.ts

@@ -0,0 +1,230 @@
+import { api } from '@/vdb/graphql/api.js';
+import {
+    getSettingsStoreValueDocument,
+    setSettingsStoreValueDocument,
+} from '@/vdb/graphql/settings-store-operations.js';
+import { SavedView, SavedViewsStore, SaveViewInput, UpdateViewInput } from '@/vdb/types/saved-views.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ColumnFiltersState } from '@tanstack/react-table';
+
+import { usePageBlock } from './use-page-block.js';
+import { usePage } from './use-page.js';
+import { usePermissions } from './use-permissions.js';
+
+const generateId = () => {
+    const array = new Uint32Array(2);
+    crypto.getRandomValues(array);
+    return array[0].toString(36) + array[1].toString(36);
+};
+
+export function useSavedViews() {
+    const queryClient = useQueryClient();
+    const { pageId } = usePage();
+    const pageBlock = usePageBlock({ optional: true });
+    const blockId = pageBlock?.blockId || 'default';
+
+    if (!pageId) {
+        throw new Error('useSavedViews must be used within a Page context');
+    }
+
+    const userViewsKey = 'vendure.dashboard.userSavedViews';
+    const globalViewsKey = 'vendure.dashboard.globalSavedViews';
+
+    // Query for user views
+    const { data: userViewsData, isLoading: userViewsLoading } = useQuery({
+        queryKey: ['saved-views-user', pageId, blockId],
+        queryFn: async () => {
+            const result = await api.query(getSettingsStoreValueDocument, { key: userViewsKey });
+            const allUserViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+            return allUserViews[pageId]?.[blockId] || [];
+        },
+    });
+
+    // Query for global views
+    const { data: globalViewsData, isLoading: globalViewsLoading } = useQuery({
+        queryKey: ['saved-views-global', pageId, blockId],
+        queryFn: async () => {
+            const result = await api.query(getSettingsStoreValueDocument, { key: globalViewsKey });
+            const allGlobalViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+            return allGlobalViews[pageId]?.[blockId] || [];
+        },
+    });
+
+    // Save user view mutation
+    const saveUserViewMutation = useMutation({
+        mutationFn: async (views: SavedView[]) => {
+            // Get current data first
+            const result = await api.query(getSettingsStoreValueDocument, { key: userViewsKey });
+            const allUserViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+
+            // Update the specific page and block
+            const updatedViews = {
+                ...allUserViews,
+                [pageId]: {
+                    ...allUserViews[pageId],
+                    [blockId]: views,
+                },
+            };
+
+            return api.mutate(setSettingsStoreValueDocument, {
+                input: { key: userViewsKey, value: updatedViews },
+            });
+        },
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ['saved-views-user', pageId, blockId] });
+        },
+    });
+
+    // Save global view mutation
+    const saveGlobalViewMutation = useMutation({
+        mutationFn: async (views: SavedView[]) => {
+            // Get current data first
+            const result = await api.query(getSettingsStoreValueDocument, { key: globalViewsKey });
+            const allGlobalViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+
+            // Update the specific page and block
+            const updatedViews = {
+                ...allGlobalViews,
+                [pageId]: {
+                    ...allGlobalViews[pageId],
+                    [blockId]: views,
+                },
+            };
+
+            return api.mutate(setSettingsStoreValueDocument, {
+                input: { key: globalViewsKey, value: updatedViews },
+            });
+        },
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ['saved-views-global', pageId, blockId] });
+        },
+    });
+
+    const saveView = async (input: SaveViewInput) => {
+        const newView: SavedView = {
+            id: generateId(),
+            name: input.name,
+            scope: input.scope,
+            filters: input.filters,
+            searchTerm: input.searchTerm,
+            pageId,
+            blockId: blockId === 'default' ? undefined : blockId,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+        };
+
+        if (input.scope === 'user') {
+            const currentViews = userViewsData || [];
+            await saveUserViewMutation.mutateAsync([...currentViews, newView]);
+        } else {
+            const currentViews = globalViewsData || [];
+            await saveGlobalViewMutation.mutateAsync([...currentViews, newView]);
+        }
+
+        return newView;
+    };
+
+    const updateView = async (input: UpdateViewInput) => {
+        const userViews = userViewsData || [];
+        const globalViews = globalViewsData || [];
+
+        const viewInUserViews = userViews.find(v => v.id === input.id);
+        const viewInGlobalViews = globalViews.find(v => v.id === input.id);
+
+        if (viewInUserViews) {
+            const updatedViews = userViews.map(v =>
+                v.id === input.id
+                    ? {
+                          ...v,
+                          name: input.name ?? v.name,
+                          filters: input.filters ?? v.filters,
+                          searchTerm: input.searchTerm !== undefined ? input.searchTerm : v.searchTerm,
+                          updatedAt: new Date().toISOString(),
+                      }
+                    : v,
+            );
+            await saveUserViewMutation.mutateAsync(updatedViews);
+        } else if (viewInGlobalViews) {
+            const updatedViews = globalViews.map(v =>
+                v.id === input.id
+                    ? {
+                          ...v,
+                          name: input.name ?? v.name,
+                          filters: input.filters ?? v.filters,
+                          searchTerm: input.searchTerm !== undefined ? input.searchTerm : v.searchTerm,
+                          updatedAt: new Date().toISOString(),
+                      }
+                    : v,
+            );
+            await saveGlobalViewMutation.mutateAsync(updatedViews);
+        }
+    };
+
+    const deleteView = async (viewId: string) => {
+        const userViews = userViewsData || [];
+        const globalViews = globalViewsData || [];
+
+        if (userViews.some(v => v.id === viewId)) {
+            const updatedViews = userViews.filter(v => v.id !== viewId);
+            await saveUserViewMutation.mutateAsync(updatedViews);
+        } else if (globalViews.some(v => v.id === viewId)) {
+            const updatedViews = globalViews.filter(v => v.id !== viewId);
+            await saveGlobalViewMutation.mutateAsync(updatedViews);
+        }
+    };
+
+    const duplicateView = async (viewId: string, newScope: 'user' | 'global') => {
+        const allViews = [...(userViewsData || []), ...(globalViewsData || [])];
+        const viewToDuplicate = allViews.find(v => v.id === viewId);
+
+        if (viewToDuplicate) {
+            const newView: SavedView = {
+                ...viewToDuplicate,
+                id: generateId(),
+                name: `${viewToDuplicate.name} (Copy)`,
+                scope: newScope,
+                pageId,
+                blockId: blockId === 'default' ? undefined : blockId,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+            };
+
+            if (newScope === 'user') {
+                const currentViews = userViewsData || [];
+                await saveUserViewMutation.mutateAsync([...currentViews, newView]);
+            } else {
+                const currentViews = globalViewsData || [];
+                await saveGlobalViewMutation.mutateAsync([...currentViews, newView]);
+            }
+
+            return newView;
+        }
+    };
+
+    const applyView = (
+        view: SavedView,
+        setFilters: (filters: ColumnFiltersState) => void,
+        setSearchTerm?: (term: string) => void,
+    ) => {
+        setFilters(view.filters);
+        if (setSearchTerm && view.searchTerm !== undefined) {
+            setSearchTerm(view.searchTerm);
+        }
+    };
+
+    // Use UpdateSettings permission for managing global views
+    const { hasPermissions } = usePermissions();
+    const canManageGlobalViews = hasPermissions(['WriteDashboardGlobalViews']);
+
+    return {
+        userViews: userViewsData || [],
+        globalViews: globalViewsData || [],
+        isLoading: userViewsLoading || globalViewsLoading,
+        saveView,
+        updateView,
+        deleteView,
+        duplicateView,
+        applyView,
+        canManageGlobalViews,
+    };
+}

package/src/lib/hooks/use-ui-language-loader.ts

@@ -0,0 +1,30 @@
+import { loadI18nMessages } from '@/vdb/lib/load-i18n-messages.js';
+import { useLingui } from '@lingui/react/macro';
+
+let currentlyLoading: string | null = null;
+
+/**
+ * @description
+ * Loads the UI translations for the given locale and activates it
+ * with the Lingui I18nProvider. Generally this is used internally
+ * when the display language is set via the user > language dialog.
+ *
+ * @docsCategory hooks
+ * @docsPage useUiLanguageLoader
+ */
+export function useUiLanguageLoader() {
+    const { i18n } = useLingui();
+
+    async function loadAndActivateLocale(locale: string) {
+        if (currentlyLoading === locale) {
+            return;
+        }
+        currentlyLoading = locale;
+        const messages = await loadI18nMessages(locale);
+        i18n.load(locale, messages);
+        i18n.activate(locale);
+        currentlyLoading = null;
+    }
+
+    return { loadAndActivateLocale };
+}

package/src/lib/index.ts

@@ -22,6 +22,7 @@ export * from './components/data-input/relation-input.js';
 export * from './components/data-input/relation-selector.js';
 export * from './components/data-input/rich-text-input.js';
 export * from './components/data-input/select-with-options.js';
+export * from './components/data-input/slug-input.js';
 export * from './components/data-input/struct-form-input.js';
 export * from './components/data-input/text-input.js';
 export * from './components/data-input/textarea-input.js';
@@ -29,6 +30,7 @@ export * from './components/data-table/add-filter-menu.js';
 export * from './components/data-table/data-table-bulk-action-item.js';
 export * from './components/data-table/data-table-bulk-actions.js';
 export * from './components/data-table/data-table-column-header.js';
+export * from './components/data-table/data-table-context.js';
 export * from './components/data-table/data-table-faceted-filter.js';
 export * from './components/data-table/data-table-filter-badge.js';
 export * from './components/data-table/data-table-filter-dialog.js';
@@ -41,11 +43,20 @@ export * from './components/data-table/filters/data-table-datetime-filter.js';
 export * from './components/data-table/filters/data-table-id-filter.js';
 export * from './components/data-table/filters/data-table-number-filter.js';
 export * from './components/data-table/filters/data-table-string-filter.js';
+export * from './components/data-table/global-views-bar.js';
+export * from './components/data-table/global-views-sheet.js';
 export * from './components/data-table/human-readable-operator.js';
+export * from './components/data-table/manage-global-views-button.js';
+export * from './components/data-table/my-views-button.js';
 export * from './components/data-table/refresh-button.js';
+export * from './components/data-table/save-view-button.js';
+export * from './components/data-table/save-view-dialog.js';
 export * from './components/data-table/types.js';
 export * from './components/data-table/use-all-bulk-actions.js';
 export * from './components/data-table/use-generated-columns.js';
+export * from './components/data-table/user-views-sheet.js';
+export * from './components/data-table/views-sheet.js';
+export * from './components/date-range-picker.js';
 export * from './components/labeled-data.js';
 export * from './components/layout/app-layout.js';
 export * from './components/layout/app-sidebar.js';
@@ -98,9 +109,11 @@ export * from './components/shared/form-field-wrapper.js';
 export * from './components/shared/history-timeline/history-entry-date.js';
 export * from './components/shared/history-timeline/history-note-checkbox.js';
 export * from './components/shared/history-timeline/history-note-editor.js';
+export * from './components/shared/history-timeline/history-note-entry.js';
 export * from './components/shared/history-timeline/history-note-input.js';
 export * from './components/shared/history-timeline/history-timeline-with-grouping.js';
 export * from './components/shared/history-timeline/history-timeline.js';
+export * from './components/shared/history-timeline/use-history-note-editor.js';
 export * from './components/shared/icon-mark.js';
 export * from './components/shared/language-selector.js';
 export * from './components/shared/logo-mark.js';
@@ -183,6 +196,7 @@ export * from './framework/dashboard-widget/metrics-widget/chart.js';
 export * from './framework/dashboard-widget/metrics-widget/metrics-widget.graphql.js';
 export * from './framework/dashboard-widget/orders-summary/order-summary-widget.graphql.js';
 export * from './framework/dashboard-widget/widget-extensions.js';
+export * from './framework/dashboard-widget/widget-filters-context.js';
 export * from './framework/data-table/data-table-extensions.js';
 export * from './framework/defaults.js';
 export * from './framework/document-extension/extend-detail-form-query.js';
@@ -259,6 +273,7 @@ export * from './hooks/use-mobile.js';
 export * from './hooks/use-page-block.js';
 export * from './hooks/use-page.js';
 export * from './hooks/use-permissions.js';
+export * from './hooks/use-saved-views.js';
 export * from './hooks/use-server-config.js';
 export * from './hooks/use-theme.js';
 export * from './hooks/use-user-settings.js';

package/src/lib/lib/load-i18n-messages.ts

@@ -0,0 +1,17 @@
+import { Messages } from '@lingui/core';
+
+export async function loadI18nMessages(locale: string): Promise<Messages> {
+    if (import.meta.env.PROD) {
+        // We add the vite-ignore directive because we do not want to transform and
+        // bundle this dynamic import. Instead, we actually want to load it at runtime
+        // as a normal dynamic JS import.
+        // These i18n JS files are generated during build by the `translationsPlugin` in the
+        // vite-plugin-translations.ts file.
+        const { messages } = await import(/* @vite-ignore */ `./i18n/${locale}.js`);
+        return messages;
+    } else {
+        // In dev mode we allow the dynamic import behaviour
+        const { messages } = await import(`../../i18n/locales/${locale}.po`);
+        return messages;
+    }
+}

package/src/lib/lib/trans.tsx

@@ -1,16 +1,20 @@
+// export { Trans } from '@lingui/react/macro';
+// export { useLingui } from '@lingui/react';
+
+
 /**
  * This is a temporary work-around because the Lingui macros do not
  * currently work when the dashboard is packaged in an npm
  * module. Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
  */
-export function Trans({ children }: Readonly<{ children: React.ReactNode; context?: string }>) {
-    return <>{children}</>;
-}
-
-export function useLingui() {
-    return {
-        i18n: {
-            t: (key: string) => key,
-        },
-    };
-}
+// export function Trans({ children }: Readonly<{ children: React.ReactNode; context?: string }>) {
+//     return <>{children}</>;
+// }
+//
+// export function useLingui() {
+//     return {
+//         i18n: {
+//             t: (key: string) => key,
+//         },
+//     };
+// }

package/src/lib/providers/i18n-provider.tsx

@@ -1,11 +1,8 @@
+import { loadI18nMessages } from '@/vdb/lib/load-i18n-messages.js';
+import { i18n } from '@lingui/core';
+import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
 import React from 'react';
-// import { i18n } from '@lingui/core';
-// import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
 
-export const locales = {
-    en: 'English',
-    de: 'Deutsch',
-};
 export const defaultLocale = 'en';
 
 /**
@@ -13,16 +10,12 @@ export const defaultLocale = 'en';
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string, onActivate?: () => void) {
-    // Temporarily disabled because Lingui macros do not work when the dashboard is packaged in an npm module.
-    // Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
-
-    // const { messages } = await import(`../../i18n/locales/${locale}.po`);
-    // i18n.load(locale, messages);
-    // i18n.activate(locale);
+    const messages = await loadI18nMessages(locale);
+    i18n.load(locale, messages);
+    i18n.activate(locale);
     onActivate?.();
 }
 
 export function I18nProvider({ children }: { children: React.ReactNode }) {
-    // return <LinguiI18nProvider i18n={i18n}>{children}</LinguiI18nProvider>;
-    return <>{children}</>;
+    return <LinguiI18nProvider i18n={i18n}>{children}</LinguiI18nProvider>;
 }

package/src/lib/types/saved-views.ts

@@ -0,0 +1,39 @@
+import { ColumnFiltersState } from '@tanstack/react-table';
+
+export interface SavedView {
+    id: string;
+    name: string;
+    scope: 'user' | 'global';
+    filters: ColumnFiltersState;
+    searchTerm?: string;
+    pageId?: string;
+    blockId?: string;
+    createdAt: string; // ISO timestamp string
+    updatedAt: string; // ISO timestamp string
+    createdBy?: string;
+}
+
+export interface SavedViewsData {
+    userViews: SavedView[];
+    globalViews: SavedView[];
+}
+
+export interface SavedViewsStore {
+    [pageId: string]: {
+        [blockId: string]: SavedView[];
+    };
+}
+
+export interface SaveViewInput {
+    name: string;
+    scope: 'user' | 'global';
+    filters: ColumnFiltersState;
+    searchTerm?: string;
+}
+
+export interface UpdateViewInput {
+    id: string;
+    name?: string;
+    filters?: ColumnFiltersState;
+    searchTerm?: string;
+}

package/src/lib/utils/saved-views-utils.ts

@@ -0,0 +1,40 @@
+import { ColumnFiltersState } from '@tanstack/react-table';
+
+import { SavedView } from '../types/saved-views.js';
+
+/**
+ * Checks if the current filters and search term match any of the provided saved views
+ * @param currentFilters - The current column filters
+ * @param currentSearchTerm - The current search term
+ * @param views - Array of saved views to check against
+ * @returns The matching saved view if found, undefined otherwise
+ */
+export function findMatchingSavedView(
+    currentFilters: ColumnFiltersState,
+    currentSearchTerm: string,
+    views: SavedView[],
+): SavedView | undefined {
+    return views.find(view => {
+        const filtersMatch = JSON.stringify(view.filters) === JSON.stringify(currentFilters);
+        const searchMatch = (view.searchTerm || '') === currentSearchTerm;
+        return filtersMatch && searchMatch;
+    });
+}
+
+/**
+ * Checks if the current filters match any saved view (user or global)
+ * @param currentFilters - The current column filters
+ * @param currentSearchTerm - The current search term
+ * @param userViews - Array of user saved views
+ * @param globalViews - Array of global saved views
+ * @returns true if a matching view is found, false otherwise
+ */
+export function isMatchingSavedView(
+    currentFilters: ColumnFiltersState,
+    currentSearchTerm: string,
+    userViews: SavedView[],
+    globalViews: SavedView[],
+): boolean {
+    const allViews = [...userViews, ...globalViews];
+    return findMatchingSavedView(currentFilters, currentSearchTerm, allViews) !== undefined;
+}