@vendure/dashboard 3.2.4 → 3.3.1

package/dist/plugin/utils/ast-utils.spec.js

@@ -1,6 +1,6 @@
 import ts from 'typescript';
-import { describe, it, expect } from 'vitest';
-import { getPluginInfo, findConfigExport } from './ast-utils.js';
+import { describe, expect, it } from 'vitest';
+import { findConfigExport, getPluginInfo } from './ast-utils.js';
 describe('getPluginInfo', () => {
     it('should return undefined when no plugin class is found', () => {
         const sourceText = `

package/dist/plugin/utils/schema-generator.js

@@ -1,5 +1,5 @@
 import { GraphQLTypesLoader } from '@nestjs/graphql';
-import { resetConfig, setConfig, getConfig, runPluginConfigurations, getFinalVendureSchema, VENDURE_ADMIN_API_TYPE_PATHS, } from '@vendure/core';
+import { getConfig, getFinalVendureSchema, resetConfig, runPluginConfigurations, setConfig, VENDURE_ADMIN_API_TYPE_PATHS, } from '@vendure/core';
 import { buildSchema } from 'graphql';
 let schemaPromise;
 /**

package/dist/plugin/utils/ui-config.js

@@ -1,6 +1,5 @@
-import { DEFAULT_AUTH_TOKEN_HEADER_KEY, DEFAULT_CHANNEL_TOKEN_KEY, ADMIN_API_PATH, } from '@vendure/common/lib/shared-constants';
-import { defaultAvailableLocales } from '../constants.js';
-import { defaultLocale, defaultLanguage, defaultAvailableLanguages } from '../constants.js';
+import { ADMIN_API_PATH, DEFAULT_AUTH_TOKEN_HEADER_KEY, DEFAULT_CHANNEL_TOKEN_KEY, } from '@vendure/common/lib/shared-constants';
+import { defaultAvailableLanguages, defaultAvailableLocales, defaultLanguage, defaultLocale, } from '../constants.js';
 export function getAdminUiConfig(config, adminUiConfig) {
     const { authOptions, apiOptions } = config;
     const propOrDefault = (prop, defaultVal, isArray = false) => {

package/dist/plugin/vite-plugin-config.js

@@ -3,17 +3,15 @@ export function viteConfigPlugin({ packageRoot }) {
     return {
         name: 'vendure:vite-config-plugin',
         config: (config) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             config.root = packageRoot;
             config.resolve = {
-                alias: {
-                    '@': path.resolve(packageRoot, './src/lib'),
-                },
+                alias: Object.assign(Object.assign({}, ((_b = (_a = config.resolve) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : {})), { '@': path.resolve(packageRoot, './src/lib') }),
             };
             // This is required to prevent Vite from pre-bundling the
             // dashboard source when it resides in node_modules.
             config.optimizeDeps = Object.assign(Object.assign({}, config.optimizeDeps), { exclude: [
-                    ...(((_a = config.optimizeDeps) === null || _a === void 0 ? void 0 : _a.exclude) || []),
+                    ...(((_c = config.optimizeDeps) === null || _c === void 0 ? void 0 : _c.exclude) || []),
                     '@vendure/dashboard',
                     '@/providers',
                     '@/framework',
@@ -28,7 +26,7 @@ export function viteConfigPlugin({ packageRoot }) {
                 // on lodash which is a CJS packages and _does_ require
                 // pre-bundling.
                 include: [
-                    ...(((_b = config.optimizeDeps) === null || _b === void 0 ? void 0 : _b.include) || []),
+                    ...(((_d = config.optimizeDeps) === null || _d === void 0 ? void 0 : _d.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
                 ] });

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.2.4",
+    "version": "3.3.1",
     "type": "module",
     "repository": {
         "type": "git",
@@ -71,7 +71,7 @@
         "@radix-ui/react-switch": "^1.1.3",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
-        "@tailwindcss/vite": "^4.0.7",
+        "@tailwindcss/vite": "^4.1.5",
         "@tanstack/eslint-plugin-query": "^5.66.1",
         "@tanstack/react-query": "^5.66.7",
         "@tanstack/react-query-devtools": "^5.68.0",
@@ -86,8 +86,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "3.2.4",
-        "@vendure/core": "3.2.4",
+        "@vendure/common": "3.3.1",
+        "@vendure/core": "3.3.1",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -108,12 +108,12 @@
         "react-hook-form": "^7.54.2",
         "recharts": "^2.15.1",
         "sonner": "^2.0.1",
-        "tailwind-merge": "^3.0.1",
-        "tailwindcss": "^4.0.6",
+        "tailwind-merge": "^3.2.0",
+        "tailwindcss": "^4.1.5",
         "tailwindcss-animate": "^1.0.7",
         "tsconfig-paths": "^4.2.0",
-        "tw-animate-css": "^1.2.4",
-        "vite": "^6.1.0",
+        "tw-animate-css": "^1.2.9",
+        "vite": "^6.3.5",
         "zod": "^3.24.2"
     },
     "devDependencies": {
@@ -126,5 +126,9 @@
         "globals": "^15.14.0",
         "vite-plugin-dts": "^4.5.3"
     },
-    "gitHead": "5434f3eca355aaf6ae3bf14f479f27d2387f3c3a"
+    "optionalDependencies": {
+        "lightningcss-linux-arm64-musl": "^1.29.3",
+        "lightningcss-linux-x64-musl": "^1.29.1"
+    },
+    "gitHead": "32fbe4af70da48fef8b915e6e00abca74f092513"
 }

package/src/app/app-providers.tsx

@@ -23,7 +23,7 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
                         </AuthProvider>
                     </ThemeProvider>
                 </UserSettingsProvider>
-                <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+                {/*<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />*/}
             </QueryClientProvider>
         </I18nProvider>
     );

package/src/app/routes/_authenticated/_orders/orders.graphql.ts

@@ -1,6 +1,5 @@
 import { assetFragment, errorResultFragment } from '@/graphql/fragments.js';
 import { graphql } from '@/graphql/graphql.js';
-import { gql } from 'awesome-graphql-client';
 
 export const orderListDocument = graphql(`
     query GetOrders($options: OrderListOptions) {

package/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -200,7 +200,9 @@ function ProductVariantDetailPage() {
                                                 <Trans>Stock level</Trans>
                                             </FormLabel>
                                             <FormControl>
-                                                <Input type="number" {...field} />
+                                                <Input type="number" value={field.value} onChange={e => {
+                                                    field.onChange(e.target.valueAsNumber);
+                                                }} />
                                             </FormControl>
                                         </FormItem>
                                     )}
@@ -224,7 +226,11 @@ function ProductVariantDetailPage() {
                                     <FormLabel>
                                         <Trans>Track inventory</Trans>
                                     </FormLabel>
-                                    <Select onValueChange={field.onChange} value={field.value}>
+                                    <Select onValueChange={val => {
+                                        if (val) {
+                                            field.onChange(val)
+                                        }
+                                    }} value={field.value}>
                                         <FormControl>
                                             <SelectTrigger className="">
                                                 <SelectValue placeholder="Track inventory" />

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -57,6 +57,8 @@ function PromotionDetailPage() {
         transformCreateInput: values => {
             return {
                 ...values,
+                startsAt: values.startsAt || undefined,
+                endsAt: values.endsAt || undefined,
                 conditions: values.conditions.filter(c => c.code !== ''),
                 actions: values.actions.filter(a => a.code !== ''),
             };
@@ -98,6 +100,10 @@ function PromotionDetailPage() {
                 if (creatingNewEntity) {
                     await navigate({ to: `../${data.id}`, from: Route.id });
                 }
+            } else {
+                toast.error(i18n.t('Failed to update promotion'), {
+                    description: data.message,
+                });
             }
         },
         onError: err => {

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -1,14 +1,13 @@
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
 import { ListPage } from '@/framework/page/list-page.js';
+import { api } from '@/graphql/api.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
-import { jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
+import { formatRelative } from 'date-fns';
+import { Ban, CheckCircle2Icon, CircleXIcon, ClockIcon, LoaderIcon, RotateCcw } from 'lucide-react';
 import { PayloadDialog } from './components/payload-dialog.js';
-import { differenceInMilliseconds, formatDuration, formatRelative } from 'date-fns';
-import { Ban, CircleXIcon, ClockIcon, LoaderIcon, RotateCcw } from 'lucide-react';
-import { CheckCircle2Icon } from 'lucide-react';
-import { api } from '@/graphql/api.js';
+import { jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_system/job-queue')({
     component: JobQueuePage,
@@ -58,7 +57,7 @@ function JobQueuePage() {
             customizeColumns={{
                 createdAt: {
                     header: 'Created At',
-                    cell: ({ row }) => formatRelative(row.original.createdAt, new Date()),
+                    cell: ({ row }) => <div title={row.original.createdAt}>{formatRelative(new Date(row.original.createdAt), new Date())}</div>,
                 },
                 data: {
                     header: 'Data',

package/src/app/routes/_authenticated/_system/scheduled-tasks.tsx

@@ -0,0 +1,241 @@
+import { FullWidthPageBlock, Page, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { DataTable } from '@/components/data-table/data-table.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
+import { ResultOf } from '@/graphql/graphql.js';
+import { PayloadDialog } from './components/payload-dialog.js';
+import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/components/ui/badge.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { CirclePlay, EllipsisIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+export const Route = createFileRoute('/_authenticated/_system/scheduled-tasks')({
+    component: ScheduledTasksPage,
+    loader: () => ({ breadcrumb: () => <Trans>Scheduled Tasks</Trans> }),
+});
+
+const getScheduledTasksDocument = graphql(`
+    query ScheduledTasks {
+        scheduledTasks {
+            id
+            description
+            schedule
+            scheduleDescription
+            lastExecutedAt
+            nextExecutionAt
+            isRunning
+            lastResult
+            enabled
+        }
+    }
+`);
+
+const updateScheduledTaskDocument = graphql(`
+    mutation UpdateScheduledTask($input: UpdateScheduledTaskInput!) {
+        updateScheduledTask(input: $input) {
+            id
+            enabled
+        }
+    }
+`);
+
+const runScheduledTaskDocument = graphql(`
+    mutation RunScheduledTask($id: String!) {
+        runScheduledTask(id: $id) {
+          success
+        }
+    }
+`);
+
+type ScheduledTask = ResultOf<typeof getScheduledTasksDocument>['scheduledTasks'][number];
+
+function ScheduledTasksPage() {
+    const { i18n } = useLingui();
+    const { data } = useQuery({
+        queryKey: ['scheduledTasks'],
+        queryFn: () => api.query(getScheduledTasksDocument),
+    });
+    const queryClient = useQueryClient();
+    const { mutate: updateScheduledTask } = useMutation({
+        mutationFn: api.mutate(updateScheduledTaskDocument),
+        onSuccess: (result) => {
+            refreshScheduledTasks();
+        },
+    });
+    const refreshScheduledTasks = () => {
+        queryClient.invalidateQueries({ queryKey: ['scheduledTasks'] });
+    }
+    const { mutate: runScheduledTask } = useMutation({
+        mutationFn: api.mutate(runScheduledTaskDocument),
+        onSuccess: (result) => {
+            if ((result as ResultOf<typeof runScheduledTaskDocument>).runScheduledTask.success) {
+                toast.success(i18n.t(`Scheduled task will be executed`));
+                queryClient.invalidateQueries({ queryKey: ['scheduledTasks'] });
+            } else {
+                toast.error(i18n.t(`Scheduled task could not be executed`));
+            }
+        },
+    });
+    const { formatDate, formatRelativeDate } = useLocalFormat();
+    const intlDateOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+    } as const;
+
+    const columnHelper = createColumnHelper<ScheduledTask>();
+    const columns = [
+        columnHelper.accessor('id', {
+            header: 'ID',
+        }),
+        columnHelper.accessor('description', {
+            header: 'Description',
+        }),
+        columnHelper.accessor('enabled', {
+            header: 'Enabled',
+            cell: ({ row }) => {
+                return row.original.enabled ? (
+                    <Badge variant="success">
+                        <Trans>Enabled</Trans>
+                    </Badge>
+                ) : (
+                    <Badge variant="secondary">
+                        <Trans>Disabled</Trans>
+                    </Badge>
+                );
+            },
+        }),
+        columnHelper.accessor('schedule', {
+            header: 'Schedule Pattern',
+        }),
+        columnHelper.accessor('scheduleDescription', {
+            header: 'Schedule',
+        }),
+        columnHelper.accessor('lastExecutedAt', {
+            header: 'Last Executed',
+            cell: ({ row }) => {
+                return row.original.lastExecutedAt ? (
+                    <div title={row.original.lastExecutedAt}>
+                        {formatRelativeDate(row.original.lastExecutedAt)}
+                    </div>
+                ) : (
+                    <Trans>Never</Trans>
+                );
+            },
+        }),
+        columnHelper.accessor('nextExecutionAt', {
+            header: 'Next Execution',
+            cell: ({ row }) => {
+                return row.original.nextExecutionAt ? (
+                    formatDate(row.original.nextExecutionAt, intlDateOptions)
+                ) : (
+                    <Trans>Never</Trans>
+                );
+            },
+        }),
+        columnHelper.accessor('isRunning', {
+            header: 'Running',
+            cell: ({ row }) => {
+                return row.original.isRunning ? (
+                    <Badge variant="success">
+                        <Trans>Running</Trans>
+                    </Badge>
+                ) : (
+                    <Badge variant="secondary">
+                        <Trans>Not Running</Trans>
+                    </Badge>
+                );
+            },
+        }),
+        columnHelper.accessor('lastResult', {
+            header: 'Last Result',
+            cell: ({ row }) => {
+                return row.original.lastResult ? (
+                    <PayloadDialog
+                        payload={row.original.lastResult}
+                        title={<Trans>View job result</Trans>}
+                        description={<Trans>The result of the job</Trans>}
+                        trigger={
+                            <Button size="sm" variant="secondary">
+                                View result
+                            </Button>
+                        }
+                    />
+                ) : (
+                    <div className="text-muted-foreground">
+                        <Trans>No result yet</Trans>
+                    </div>
+                );
+            },
+        }),
+        columnHelper.display({
+            id: 'actions',
+            header: 'Actions',
+            cell: ({ row }) => {
+                return (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                                <EllipsisIcon />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                            {row.original.enabled && <DropdownMenuItem
+                                onClick={() =>
+                                    runScheduledTask({
+                                        id: row.original.id,
+                                    })
+                                }
+                            >
+                                <CirclePlay className="w-4 h-4" />
+                                <Trans>Run</Trans>
+                            </DropdownMenuItem>}
+                            <DropdownMenuItem
+                                onClick={() =>
+                                    updateScheduledTask({
+                                        input: { id: row.original.id, enabled: !row.original.enabled },
+                                    })
+                                }
+                            >
+                                {row.original.enabled ? <Trans>Disable</Trans> : <Trans>Enable</Trans>}
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            },
+        }),
+    ];
+
+    return (
+        <Page pageId="scheduled-tasks-list">
+            <PageTitle>Scheduled Tasks</PageTitle>
+            <PageLayout>
+                <FullWidthPageBlock blockId="list-table">
+                    <DataTable
+                        onRefresh={refreshScheduledTasks}
+                        columns={columns}
+                        data={data?.scheduledTasks ?? []}
+                        totalItems={data?.scheduledTasks?.length ?? 0}
+                        defaultColumnVisibility={{
+                            schedule: false,
+                        }}
+                    />
+                </FullWidthPageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/styles.css

@@ -76,6 +76,21 @@
     grid-column: span 2 / span 2;
 }
 
+@layer utilities {
+    @keyframes rotate {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .animate-rotate {
+        animation: rotate 0.5s linear;
+    }
+}
+
 /* Overrides for the react-grid-layout library */
 .react-grid-item {
     transition: none !important;

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -73,7 +73,7 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
         <div className="flex items-center gap-2">
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+                    <Button variant="ghost" size="sm" className="ml-auto hidden h-8 lg:flex">
                         <Settings2 />
                         <Trans>Columns</Trans>
                     </Button>

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

@@ -23,6 +23,7 @@ import { AddFilterMenu } from './add-filter-menu.js';
 import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
 import { DataTableFilterBadge } from './data-table-filter-badge.js';
 import { useChannel } from '@/hooks/use-channel.js';
+import { RefreshButton } from '@/components/data-table/refresh-button.js';
 
 export interface FacetedFilter {
     title: string;
@@ -31,8 +32,8 @@ export interface FacetedFilter {
     options?: DataTableFacetedFilterOption[];
 }
 
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
+interface DataTableProps<TData> {
+    columns: ColumnDef<TData, any>[];
     data: TData[];
     totalItems: number;
     page?: number;
@@ -52,26 +53,28 @@ interface DataTableProps<TData, TValue> {
      * when needed.
      */
     setTableOptions?: (table: TableOptions<TData>) => TableOptions<TData>;
+    onRefresh?: () => void;
 }
 
-export function DataTable<TData, TValue>({
-    columns,
-    data,
-    totalItems,
-    page,
-    itemsPerPage,
-    sorting: sortingInitialState,
-    columnFilters: filtersInitialState,
-    onPageChange,
-    onSortChange,
-    onFilterChange,
-    onSearchTermChange,
-    onColumnVisibilityChange,
-    defaultColumnVisibility,
-    facetedFilters,
-    disableViewOptions,
-    setTableOptions,
-}: DataTableProps<TData, TValue>) {
+export function DataTable<TData>({
+                                     columns,
+                                     data,
+                                     totalItems,
+                                     page,
+                                     itemsPerPage,
+                                     sorting: sortingInitialState,
+                                     columnFilters: filtersInitialState,
+                                     onPageChange,
+                                     onSortChange,
+                                     onFilterChange,
+                                     onSearchTermChange,
+                                     onColumnVisibilityChange,
+                                     defaultColumnVisibility,
+                                     facetedFilters,
+                                     disableViewOptions,
+                                     setTableOptions,
+                                     onRefresh,
+                                 }: DataTableProps<TData>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
     const { activeChannel } = useChannel();
@@ -160,15 +163,18 @@ export function DataTable<TData, TValue>({
                                 const column = table.getColumn(f.id);
                                 const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
                                 return <DataTableFilterBadge
-                                            key={f.id}
-                                            filter={f}
-                                            currencyCode={currency}
-                                            dataType={(column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'}
-                                            onRemove={() => setColumnFilters(old => old.filter(x => x.id !== f.id))} />;
+                                    key={f.id}
+                                    filter={f}
+                                    currencyCode={currency}
+                                    dataType={(column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'}
+                                    onRemove={() => setColumnFilters(old => old.filter(x => x.id !== f.id))} />;
                             })}
                     </div>
                 </div>
-                {!disableViewOptions && <DataTableViewOptions table={table} />}
+                <div className="flex items-center justify-start gap-2">
+                    {!disableViewOptions && <DataTableViewOptions table={table} />}
+                    {onRefresh && <RefreshButton onRefresh={onRefresh} />}
+                </div>
             </div>
             <div className="rounded-md border my-2">
                 <Table>

package/src/lib/components/data-table/refresh-button.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button.js';
+import { RefreshCw } from 'lucide-react';
+
+export function RefreshButton({ onRefresh }: { onRefresh: () => void }) {
+    const [isRotating, setIsRotating] = useState(false);
+
+    const handleClick = () => {
+        if (!isRotating) {
+            setIsRotating(true);
+            onRefresh();
+        }
+    };
+
+    return (
+        <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClick}
+        >
+            <RefreshCw onAnimationEnd={() => setIsRotating(false)}
+                       className={isRotating ? 'animate-rotate' : ''} />
+        </Button>
+    );
+}

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

@@ -4,7 +4,7 @@ import { useAuth } from '@/hooks/use-auth.js';
 import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import { ChevronsUpDown, LogOut, Monitor, Moon, Sparkles, Sun } from 'lucide-react';
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
+// import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -64,10 +64,15 @@ export function NavUser() {
                                 size="lg"
                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                             >
-                                <Avatar className="h-8 w-8 rounded-lg">
-                                    <AvatarImage src={user.id} alt={user.firstName} />
-                                    <AvatarFallback className="rounded-lg">{avatarFallback}</AvatarFallback>
-                                </Avatar>
+                                {/* Avatar component temporarily disabled due to https://github.com/radix-ui/primitives/issues/3489
+                                    error in published package version */}
+                                {/*<Avatar className="h-8 w-8 rounded-lg">*/}
+                                {/*    <AvatarImage src={user.id} alt={user.firstName} />*/}
+                                {/*    <AvatarFallback className="rounded-lg">{avatarFallback}</AvatarFallback>*/}
+                                {/*</Avatar>*/}
+                                <div className='relative flex rounded-lg border justify-center items-center w-8 h-8'>
+                                    {avatarFallback}
+                                </div>
                                 <div className="grid flex-1 text-left text-sm leading-tight">
                                     <span className="truncate font-semibold">
                                         {user.firstName} {user.lastName}
@@ -85,12 +90,12 @@ export function NavUser() {
                         >
                             <DropdownMenuLabel className="p-0 font-normal">
                                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                                    <Avatar className="h-8 w-8 rounded-lg">
-                                        <AvatarImage src={user.id} alt={user.firstName} />
-                                        <AvatarFallback className="rounded-lg">
-                                            {avatarFallback}
-                                        </AvatarFallback>
-                                    </Avatar>
+                                    {/*<Avatar className="h-8 w-8 rounded-lg">*/}
+                                    {/*    <AvatarImage src={user.id} alt={user.firstName} />*/}
+                                    {/*    <AvatarFallback className="rounded-lg">*/}
+                                    {/*        {avatarFallback}*/}
+                                    {/*    </AvatarFallback>*/}
+                                    {/*</Avatar>*/}
                                     <div className="grid flex-1 text-left text-sm leading-tight">
                                         <span className="truncate font-semibold">
                                             {user.firstName} {user.lastName}