@vendure/dashboard 3.5.2-master-202512180239 → 3.5.2-master-202512190240

package/src/lib/components/data-table/data-table-context.tsx

@@ -1,8 +1,10 @@
 'use client';
-
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import React, { createContext, ReactNode, useContext } from 'react';
 
+export type ColumnConfig = { columnOrder: string[]; columnVisibility: Record<string, boolean> };
+
 interface DataTableContextValue {
     columnFilters: ColumnFiltersState;
     setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
@@ -16,7 +18,7 @@ interface DataTableContextValue {
     onRefresh?: () => void;
     isLoading?: boolean;
     table?: Table<any>;
-    handleApplyView: (filters: ColumnFiltersState, searchTerm?: string) => void;
+    handleApplyView: (filters: ColumnFiltersState, columnConfig: ColumnConfig, searchTerm?: string) => void;
 }
 
 const DataTableContext = createContext<DataTableContextValue | undefined>(undefined);
@@ -52,7 +54,13 @@ export function DataTableProvider({
     isLoading,
     table,
 }: DataTableProviderProps) {
-    const handleApplyView = (filters: ColumnFiltersState, viewSearchTerm?: string) => {
+    const { setTableSettings } = useUserSettings();
+
+    const handleApplyView = (
+        filters: ColumnFiltersState,
+        columnConfig: ColumnConfig,
+        viewSearchTerm?: string,
+    ) => {
         setColumnFilters(filters);
         if (viewSearchTerm !== undefined && onSearchTermChange) {
             setSearchTerm(viewSearchTerm);
@@ -61,6 +69,13 @@ export function DataTableProvider({
         if (onFilterChange && table) {
             onFilterChange(table, filters);
         }
+
+        if (pageId && columnConfig.columnOrder) {
+            setTableSettings(pageId, 'columnOrder', columnConfig.columnOrder);
+        }
+        if (pageId && columnConfig.columnVisibility) {
+            setTableSettings(pageId, 'columnVisibility', columnConfig.columnVisibility);
+        }
     };
 
     const value: DataTableContextValue = {

package/src/lib/components/data-table/global-views-bar.tsx

@@ -28,7 +28,7 @@ export const GlobalViewsBar: React.FC = () => {
     );
 
     const handleViewClick = (view: SavedView) => {
-        handleApplyView(view.filters, view.searchTerm);
+        handleApplyView(view.filters, view.columnConfig, view.searchTerm);
     };
 
     const isViewActive = (view: SavedView) => {

package/src/lib/components/data-table/save-view-dialog.tsx

@@ -7,6 +7,8 @@ import { Input } from '../ui/input.js';
 import { Label } from '../ui/label.js';
 import { RadioGroup, RadioGroupItem } from '../ui/radio-group.js';
 import { toast } from 'sonner';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 
 interface SaveViewDialogProps {
     open: boolean;
@@ -25,6 +27,21 @@ export const SaveViewDialog: React.FC<SaveViewDialogProps> = ({
     const [scope, setScope] = useState<'user' | 'global'>('user');
     const [saving, setSaving] = useState(false);
     const { saveView, userViews, globalViews, canManageGlobalViews } = useSavedViews();
+    const { pageId } = usePage();
+    const { settings } = useUserSettings();
+
+    const defaultVisibility = {
+        id: false,
+        createdAt: false,
+        updatedAt: false,
+        type: false,
+        currencyCode: false,
+    }
+    const tableSettings = pageId ? settings.tableSettings?.[pageId] : undefined;
+    const columnVisibility = pageId
+        ? (tableSettings?.columnVisibility ?? defaultVisibility)
+        : defaultVisibility;
+    const columnOrder = pageId ? (tableSettings?.columnOrder ?? []) : [];
 
     const handleSave = async () => {
         if (!name.trim()) {
@@ -45,6 +62,10 @@ export const SaveViewDialog: React.FC<SaveViewDialogProps> = ({
                 name: name.trim(),
                 scope,
                 filters,
+                columnConfig : {
+                    columnVisibility,
+                    columnOrder,
+                },
                 searchTerm,
             });
             toast.success(`View "${name}" saved successfully`);

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -16,9 +16,15 @@ import { usePage } from '@/vdb/hooks/use-page.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
-import { AccessorFnColumnDef, AccessorKeyColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
+import {
+    AccessorFnColumnDef,
+    AccessorKeyColumnDef,
+    CellContext,
+    createColumnHelper,
+    Row,
+} from '@tanstack/react-table';
 import { EllipsisIcon, TrashIcon } from 'lucide-react';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { toast } from 'sonner';
 import {
     AdditionalColumns,
@@ -116,6 +122,25 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
             const customConfig = customizeColumns?.[fieldInfo.name as unknown as AllItemFieldKeys<T>] ?? {};
             const { header, meta, cell: customCell, ...customConfigRest } = customConfig;
             const enableColumnFilter = fieldInfo.isScalar && !facetedFilters?.[fieldInfo.name];
+            const displayComponentId =
+                pageId && pageBlock?.blockId
+                    ? generateDisplayComponentKey(pageId, pageBlock.blockId, fieldInfo.name)
+                    : undefined;
+
+            // If a custom cell function is provided, use it directly (like additionalColumns does).
+            // This preserves the same behavior and prevents cell unmounting issues.
+            // Only use CellWrapper for columns without custom cells.
+            const cellFn =
+                typeof customCell === 'function'
+                    ? customCell
+                    : (cellContext: CellContext<any, any>) => (
+                          <CellWrapper
+                              cellContext={cellContext}
+                              fieldInfo={fieldInfo}
+                              isCustomField={isCustomField}
+                              displayComponentId={displayComponentId}
+                          />
+                      );
 
             return columnHelper.accessor(fieldInfo.name as any, {
                 id: fieldInfo.name,
@@ -126,28 +151,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
                 // otherwise the TanStack Table with apply an "auto" function which somehow
                 // prevents certain filters from working.
                 filterFn: 'equalsString',
-                cell: cellContext => {
-                    const { cell, row } = cellContext;
-                    const cellValue = cell.getValue();
-                    const value =
-                        cellValue ??
-                        (isCustomField ? row.original?.customFields?.[fieldInfo.name] : undefined);
-                    const displayComponentId =
-                        pageId && pageBlock?.blockId
-                            ? generateDisplayComponentKey(pageId, pageBlock.blockId, fieldInfo.name)
-                            : undefined;
-
-                    const CustomDisplayComponent =
-                        displayComponentId && getDisplayComponent(displayComponentId);
-
-                    if (CustomDisplayComponent) {
-                        return <CustomDisplayComponent value={value} {...cellContext} />;
-                    }
-                    if (typeof customCell === 'function') {
-                        return customCell(cellContext);
-                    }
-                    return <DefaultDisplayComponent value={value} fieldInfo={fieldInfo} />;
-                },
+                cell: cellFn,
                 header: headerContext => {
                     return (
                         <DataTableColumnHeader headerContext={headerContext} customConfig={customConfig} />
@@ -291,6 +295,34 @@ function DefaultDisplayComponent({ value, fieldInfo }: { value: any; fieldInfo:
     return value;
 }
 
+/**
+ * A cell wrapper component for columns without custom cell functions.
+ * Handles default display logic including custom display components and field-type-based rendering.
+ */
+const CellWrapper = memo(function CellWrapper({
+    cellContext,
+    fieldInfo,
+    isCustomField,
+    displayComponentId,
+}: {
+    cellContext: CellContext<any, any>;
+    fieldInfo: FieldInfo;
+    isCustomField: boolean;
+    displayComponentId?: string;
+}) {
+    const { cell, row } = cellContext;
+    const cellValue = cell.getValue();
+    const value =
+        cellValue ?? (isCustomField ? (row.original as any)?.customFields?.[fieldInfo.name] : undefined);
+
+    const CustomDisplayComponent = displayComponentId && getDisplayComponent(displayComponentId);
+
+    if (CustomDisplayComponent) {
+        return <CustomDisplayComponent value={value} {...cellContext} />;
+    }
+    return <DefaultDisplayComponent value={value} fieldInfo={fieldInfo} />;
+});
+
 function DeleteMutationRowAction({
     deleteMutation,
     row,

package/src/lib/components/data-table/views-sheet.tsx

@@ -44,7 +44,7 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
     const isGlobal = type === 'global';
 
     const handleViewApply = (view: SavedView) => {
-        handleApplyView(view.filters, view.searchTerm);
+        handleApplyView(view.filters,view.columnConfig, view.searchTerm);
         const viewName = view.name;
         const message = isGlobal ? t`Applied global view "${viewName}"` : t`Applied view "${viewName}"`;
         toast.success(message);

package/src/lib/components/layout/channel-switcher.tsx

@@ -138,7 +138,7 @@ export function ChannelSwitcher() {
                                         </div>
                                         <ChannelCodeLabel code={channel.code} />
                                         {channel.id === displayChannel?.id && (
-                                            <span className="ml-auto text-xs text-muted-foreground">
+                                            <span className="ms-auto text-xs text-muted-foreground">
                                                 <Trans context="current channel">Current</Trans>
                                             </span>
                                         )}
@@ -146,9 +146,9 @@ export function ChannelSwitcher() {
                                     {/* Show language sub-menu for the current channel */}
                                     {channel.id === displayChannel?.id && (
                                         <DropdownMenuSub>
-                                            <DropdownMenuSubTrigger className="gap-2 p-2 pl-4">
+                                            <DropdownMenuSubTrigger className="gap-2 p-2 ps-4">
                                                 <Languages className="w-4 h-4" />
-                                                <div className="flex gap-1 ml-2">
+                                                <div className="flex gap-1 ms-2">
                                                     <span className="text-muted-foreground">Content: </span>
                                                     {formatLanguageName(contentLanguage)}
                                                 </div>
@@ -167,7 +167,7 @@ export function ChannelSwitcher() {
                                                         </div>
                                                         <span>{label}</span>
                                                         {contentLanguage === languageCode && (
-                                                            <span className="ml-auto text-xs text-muted-foreground">
+                                                            <span className="ms-auto text-xs text-muted-foreground">
                                                                 <Trans context="active language">
                                                                     Active
                                                                 </Trans>
@@ -200,7 +200,9 @@ export function ChannelSwitcher() {
                                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
                                         <Plus className="size-4" />
                                     </div>
-                                    <div className="text-muted-foreground font-medium">Add channel</div>
+                                    <div className="text-muted-foreground font-medium">
+                                        <Trans>Add channel</Trans>
+                                    </div>
                                 </Link>
                             </DropdownMenuItem>
                         </DropdownMenuContent>

package/src/lib/components/layout/nav-main.tsx

@@ -215,7 +215,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuButton tooltip={item.title}>
                                 {item.icon && <item.icon />}
                                 <span>{i18n.t(item.title)}</span>
-                                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                <ChevronRight className="ms-auto transition-transform duration-200 rtl:rotate-180 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
                         <CollapsibleContent>
@@ -280,7 +280,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuButton tooltip={i18n.t(item.title)}>
                                 {item.icon && <item.icon />}
                                 <span>{i18n.t(item.title)}</span>
-                                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                <ChevronRight className="ms-auto transition-transform duration-200 rtl:rotate-180 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
                         <CollapsibleContent>

package/src/lib/components/shared/alerts.tsx

@@ -29,7 +29,9 @@ export function Alerts() {
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="max-w-[800px] min-w-96">
-                <DropdownMenuLabel>Alerts</DropdownMenuLabel>
+                <DropdownMenuLabel>
+                    <Trans>Alerts</Trans>
+                </DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <ScrollArea className="max-h-[500px]">
                     {activeCount > 0 ? (

package/src/lib/components/shared/assign-to-channel-bulk-action.tsx

@@ -23,16 +23,16 @@ interface AssignToChannelBulkActionProps {
 }
 
 export function AssignToChannelBulkAction({
-                                              selection,
-                                              table,
-                                              entityType,
-                                              mutationFn,
-                                              requiredPermissions,
-                                              buildInput,
-                                              additionalFields,
-                                              additionalData = {},
-                                              onSuccess,
-                                          }: Readonly<AssignToChannelBulkActionProps>) {
+    selection,
+    table,
+    entityType,
+    mutationFn,
+    requiredPermissions,
+    buildInput,
+    additionalFields,
+    additionalData = {},
+    onSuccess,
+}: Readonly<AssignToChannelBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { channels } = useChannel();
     const [dialogOpen, setDialogOpen] = useState(false);

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -70,7 +70,7 @@ export function AssignToChannelDialog({
             onOpenChange(false);
         },
         onError: () => {
-            toast.error(`Failed to assign ${entityIdsLength} ${entityType} to channel`);
+            toast.error(t`Failed to assign ${entityIdsLength} ${entityType} to channel`);
         },
     });
 

package/src/lib/components/shared/assigned-channels.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Plus } from 'lucide-react';
+
+import { ChannelChip } from '@/vdb/components/shared/channel-chip.js';
+import { AssignToChannelDialog } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
+import type { SimpleChannel } from '@/vdb/providers/channel-provider.js';
+
+interface AssignedChannelsProps {
+    channels: SimpleChannel[];
+    entityId: string;
+    canUpdate?: boolean;
+    assignMutationFn: (variables: any) => Promise<any>;
+    removeMutationFn: (variables: any) => Promise<any>;
+}
+
+export function AssignedChannels({
+    channels,
+    entityId,
+    canUpdate = true,
+    assignMutationFn,
+    removeMutationFn,
+}: AssignedChannelsProps) {
+    const { t } = useLingui();
+    const queryClient = useQueryClient();
+    const { activeChannel, channels: allChannels } = useChannel();
+    const [assignDialogOpen, setAssignDialogOpen] = useState(false);
+    const { priceFactor, priceFactorField } = usePriceFactor();
+
+    const { mutate: removeFromChannel, isPending: isRemoving } = useMutation({
+        mutationFn: removeMutationFn,
+        onSuccess: () => {
+            toast.success(t`Successfully removed product from channel`);
+            queryClient.invalidateQueries({ queryKey: ['DetailPage', 'product', { id: entityId }] });
+        },
+        onError: () => {
+            toast.error(t`Failed to remove product from channel`);
+        },
+    });
+
+    async function onRemoveHandler(channelId: string) {
+        if (channelId === activeChannel?.id) {
+            toast.error(t`Cannot remove from active channel`);
+            return;
+        }
+        removeFromChannel({
+            input: {
+                productIds: [entityId],
+                channelId,
+            },
+        });
+    }
+
+    const handleAssignSuccess = () => {
+        queryClient.invalidateQueries({ queryKey: ['DetailPage', 'product', { id: entityId }] });
+        setAssignDialogOpen(false);
+    };
+
+    // Only show add button if there are more channels available
+    const availableChannels = allChannels.filter(ch => !channels.map(c => c.id).includes(ch.id));
+    const showAddButton = canUpdate && availableChannels.length > 0;
+
+    return (
+        <>
+            <div className="flex flex-wrap gap-1 mb-2">
+                {channels.filter(c => c.code !== DEFAULT_CHANNEL_CODE).map((channel: SimpleChannel) => {
+                    return (
+                        <ChannelChip key={channel.id} channel={channel} removable={canUpdate && channel.id !== activeChannel?.id} onRemove={onRemoveHandler} />
+                    );
+                })}
+            </div>
+            {showAddButton && (
+                <>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setAssignDialogOpen(true)}
+                        disabled={isRemoving}
+                    >
+                        <Plus className="h-4 w-4 mr-1" />
+                        <Trans>Assign to channel</Trans>
+                    </Button>
+                    <AssignToChannelDialog
+                        entityType="product"
+                        open={assignDialogOpen}
+                        onOpenChange={setAssignDialogOpen}
+                        entityIds={[entityId]}
+                        mutationFn={assignMutationFn}
+                        onSuccess={handleAssignSuccess}
+                        buildInput={(channelId: string) => ({
+                            productIds: [entityId],
+                            channelId,
+                            priceFactor,
+                        })}
+                        additionalFields={priceFactorField}
+                    />
+                </>
+            )}
+        </>
+    );
+}

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -18,17 +18,15 @@ interface AssignedFacetValuesProps {
     value?: string[] | null;
     facetValues: FacetValue[];
     canUpdate?: boolean;
-    onBlur?: () => void;
     onChange?: (value: string[]) => void;
 }
 
 export function AssignedFacetValues({
-                                        value = [],
-                                        facetValues,
-                                        canUpdate = true,
-                                        onBlur,
-                                        onChange,
-                                    }: AssignedFacetValuesProps) {
+    value = [],
+    facetValues,
+    canUpdate = true,
+    onChange,
+}: Readonly<AssignedFacetValuesProps>) {
     const [knownFacetValues, setKnownFacetValues] = useState<FacetValue[]>(facetValues);
 
     function onSelectHandler(facetValue: FacetValue) {

package/src/lib/components/shared/channel-chip.tsx

@@ -0,0 +1,43 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { X } from 'lucide-react';
+import type { SimpleChannel } from '@/vdb/providers/channel-provider.js';
+
+interface ChannelChipProps {
+    channel: SimpleChannel;
+    removable?: boolean;
+    onRemove?: (id: string) => void;
+}
+
+/**
+ * @description
+ * A component for displaying a channel as a chip.
+ *
+ * @docsCategory components
+ * @since 3.5.2
+ */
+export function ChannelChip({
+    channel,
+    removable = true,
+    onRemove,
+}: Readonly<ChannelChipProps>) {
+    return (
+        <Badge
+            variant="secondary"
+            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
+        >
+            <div className="flex items-center gap-1.5">
+                <span className="font-medium">{channel.code}</span>
+            </div>
+            {removable && (
+                <button
+                    type="button"
+                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30 hover:cursor-pointer"
+                    onClick={() => onRemove?.(channel.id)}
+                    aria-label={`Remove ${channel.code} from ${channel.token}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}

package/src/lib/components/ui/dropdown-menu.tsx

@@ -161,6 +161,8 @@ function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuP
     return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
+const customDropdownMenuSubTriggerClassNames = 'data-[inset]:ps-8';
+const customChevronIconClassNames = 'ms-auto rtl:rotate-180';
 function DropdownMenuSubTrigger({
     className,
     inset,
@@ -175,12 +177,13 @@ function DropdownMenuSubTrigger({
             data-inset={inset}
             className={cn(
                 'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+                customDropdownMenuSubTriggerClassNames,
                 className,
             )}
             {...props}
         >
             {children}
-            <ChevronRightIcon className="ml-auto size-4" />
+            <ChevronRightIcon className={cn('size-4', customChevronIconClassNames)} />
         </DropdownMenuPrimitive.SubTrigger>
     );
 }

package/src/lib/components/ui/sidebar.tsx

@@ -443,8 +443,9 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
     );
 }
 
+const customLogicalPropsClassNames = 'text-start group-has-data-[sidebar=menu-action]/menu-item:pe-8';
 const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    `peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 ${customLogicalPropsClassNames}`,
     {
         variants: {
             variant: {

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

@@ -113,6 +113,7 @@ export function useSavedViews() {
             scope: input.scope,
             filters: input.filters,
             searchTerm: input.searchTerm,
+            columnConfig: input.columnConfig,
             pageId,
             blockId: blockId === 'default' ? undefined : blockId,
             createdAt: new Date().toISOString(),

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

@@ -51,7 +51,13 @@ const channelsDocument = graphql(
 
 // Define the type for a channel
 type ActiveChannel = ResultOf<typeof activeChannelDocument>['activeChannel'];
-type Channel = ResultOf<typeof channelFragment>;
+export type Channel = ResultOf<typeof channelFragment>;
+
+/**
+ * Simplified channel type with only the basic fields (id, code, token)
+ * Used in components that don't need the full channel information
+ */
+export type SimpleChannel = Pick<Channel, 'id' | 'code' | 'token'>;
 
 /**
  * @description

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

@@ -1,10 +1,12 @@
 import { ColumnFiltersState } from '@tanstack/react-table';
+import { ColumnConfig } from '../components/data-table/data-table-context.js';
 
 export interface SavedView {
     id: string;
     name: string;
     scope: 'user' | 'global';
     filters: ColumnFiltersState;
+    columnConfig: ColumnConfig;
     searchTerm?: string;
     pageId?: string;
     blockId?: string;
@@ -28,6 +30,7 @@ export interface SaveViewInput {
     name: string;
     scope: 'user' | 'global';
     filters: ColumnFiltersState;
+    columnConfig: ColumnConfig;
     searchTerm?: string;
 }