@vendure/dashboard 3.4.3-master-202509250229 → 3.5.0-minor-202509261210

package/dist/plugin/api/api-extensions.js

@@ -6,33 +6,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.adminApiExtensions = void 0;
 const graphql_tag_1 = __importDefault(require("graphql-tag"));
 exports.adminApiExtensions = (0, graphql_tag_1.default) `
-    type MetricSummary {
-        interval: MetricInterval!
-        type: MetricType!
+    type DashboardMetricSummary {
+        type: DashboardMetricType!
         title: String!
-        entries: [MetricSummaryEntry!]!
+        entries: [DashboardMetricSummaryEntry!]!
     }
-    enum MetricInterval {
-        Daily
-    }
-    enum MetricType {
+    enum DashboardMetricType {
         OrderCount
         OrderTotal
         AverageOrderValue
     }
-    type MetricSummaryEntry {
+    type DashboardMetricSummaryEntry {
         label: String!
         value: Float!
     }
-    input MetricSummaryInput {
-        interval: MetricInterval!
-        types: [MetricType!]!
+    input DashboardMetricSummaryInput {
+        types: [DashboardMetricType!]!
         refresh: Boolean
+        startDate: DateTime!
+        endDate: DateTime!
     }
     extend type Query {
         """
-        Get metrics for the given interval and metric types.
+        Get metrics for the given date range and metric types.
         """
-        metricSummary(input: MetricSummaryInput): [MetricSummary!]!
+        dashboardMetricSummary(input: DashboardMetricSummaryInput): [DashboardMetricSummary!]!
     }
 `;

package/dist/plugin/api/metrics.resolver.d.ts

@@ -1,8 +1,8 @@
 import { RequestContext } from '@vendure/core';
 import { MetricsService } from '../service/metrics.service.js';
-import { MetricSummary, MetricSummaryInput } from '../types.js';
+import { DashboardMetricSummary, DashboardMetricSummaryInput } from '../types.js';
 export declare class MetricsResolver {
     private service;
     constructor(service: MetricsService);
-    metricSummary(ctx: RequestContext, input: MetricSummaryInput): Promise<MetricSummary[]>;
+    dashboardMetricSummary(ctx: RequestContext, input: DashboardMetricSummaryInput): Promise<DashboardMetricSummary[]>;
 }

package/dist/plugin/api/metrics.resolver.js

@@ -20,7 +20,7 @@ let MetricsResolver = class MetricsResolver {
     constructor(service) {
         this.service = service;
     }
-    async metricSummary(ctx, input) {
+    async dashboardMetricSummary(ctx, input) {
         return this.service.getMetrics(ctx, input);
     }
 };
@@ -33,7 +33,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [core_1.RequestContext, Object]),
     __metadata("design:returntype", Promise)
-], MetricsResolver.prototype, "metricSummary", null);
+], MetricsResolver.prototype, "dashboardMetricSummary", null);
 exports.MetricsResolver = MetricsResolver = __decorate([
     (0, graphql_1.Resolver)(),
     __metadata("design:paramtypes", [metrics_service_js_1.MetricsService])

package/dist/plugin/config/metrics-strategies.d.ts

@@ -1,6 +1,6 @@
 import { RequestContext } from '@vendure/core';
 import { MetricData } from '../service/metrics.service.js';
-import { MetricInterval, MetricSummaryEntry, MetricType } from '../types.js';
+import { DashboardMetricSummaryEntry, DashboardMetricType } from '../types.js';
 /**
  * Calculate your metric data based on the given input.
  * Be careful with heavy queries and calculations,
@@ -8,32 +8,32 @@ import { MetricInterval, MetricSummaryEntry, MetricType } from '../types.js';
  *
  */
 export interface MetricCalculation {
-    type: MetricType;
+    type: DashboardMetricType;
     getTitle(ctx: RequestContext): string;
-    calculateEntry(ctx: RequestContext, interval: MetricInterval, data: MetricData): MetricSummaryEntry;
+    calculateEntry(ctx: RequestContext, data: MetricData): DashboardMetricSummaryEntry;
 }
 export declare function getMonthName(monthNr: number): string;
 /**
  * Calculates the average order value per month/week
  */
 export declare class AverageOrderValueMetric implements MetricCalculation {
-    readonly type = MetricType.AverageOrderValue;
+    readonly type = DashboardMetricType.AverageOrderValue;
     getTitle(ctx: RequestContext): string;
-    calculateEntry(ctx: RequestContext, interval: MetricInterval, data: MetricData): MetricSummaryEntry;
+    calculateEntry(ctx: RequestContext, data: MetricData): DashboardMetricSummaryEntry;
 }
 /**
  * Calculates number of orders
  */
 export declare class OrderCountMetric implements MetricCalculation {
-    readonly type = MetricType.OrderCount;
+    readonly type = DashboardMetricType.OrderCount;
     getTitle(ctx: RequestContext): string;
-    calculateEntry(ctx: RequestContext, interval: MetricInterval, data: MetricData): MetricSummaryEntry;
+    calculateEntry(ctx: RequestContext, data: MetricData): DashboardMetricSummaryEntry;
 }
 /**
  * Calculates order total
  */
 export declare class OrderTotalMetric implements MetricCalculation {
-    readonly type = MetricType.OrderTotal;
+    readonly type = DashboardMetricType.OrderTotal;
     getTitle(ctx: RequestContext): string;
-    calculateEntry(ctx: RequestContext, interval: MetricInterval, data: MetricData): MetricSummaryEntry;
+    calculateEntry(ctx: RequestContext, data: MetricData): DashboardMetricSummaryEntry;
 }

package/dist/plugin/config/metrics-strategies.js

@@ -12,12 +12,12 @@ function getMonthName(monthNr) {
  */
 class AverageOrderValueMetric {
     constructor() {
-        this.type = types_js_1.MetricType.AverageOrderValue;
+        this.type = types_js_1.DashboardMetricType.AverageOrderValue;
     }
     getTitle(ctx) {
         return 'average-order-value';
     }
-    calculateEntry(ctx, interval, data) {
+    calculateEntry(ctx, data) {
         const label = data.date.toISOString();
         if (!data.orders.length) {
             return {
@@ -39,12 +39,12 @@ exports.AverageOrderValueMetric = AverageOrderValueMetric;
  */
 class OrderCountMetric {
     constructor() {
-        this.type = types_js_1.MetricType.OrderCount;
+        this.type = types_js_1.DashboardMetricType.OrderCount;
     }
     getTitle(ctx) {
         return 'order-count';
     }
-    calculateEntry(ctx, interval, data) {
+    calculateEntry(ctx, data) {
         const label = data.date.toISOString();
         return {
             label,
@@ -58,12 +58,12 @@ exports.OrderCountMetric = OrderCountMetric;
  */
 class OrderTotalMetric {
     constructor() {
-        this.type = types_js_1.MetricType.OrderTotal;
+        this.type = types_js_1.DashboardMetricType.OrderTotal;
     }
     getTitle(ctx) {
         return 'order-totals';
     }
-    calculateEntry(ctx, interval, data) {
+    calculateEntry(ctx, data) {
         const label = data.date.toISOString();
         return {
             label,

package/dist/plugin/constants.d.ts

@@ -1,6 +1,8 @@
+import { RwPermissionDefinition } from '@vendure/core';
 export declare const DEFAULT_APP_PATH: string;
 export declare const loggerCtx = "DashboardPlugin";
 export declare const defaultLanguage = "en";
 export declare const defaultLocale: undefined;
 export declare const defaultAvailableLanguages: string[];
 export declare const defaultAvailableLocales: string[];
+export declare const manageDashboardGlobalViews: RwPermissionDefinition;

package/dist/plugin/constants.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultAvailableLocales = exports.defaultAvailableLanguages = exports.defaultLocale = exports.defaultLanguage = exports.loggerCtx = exports.DEFAULT_APP_PATH = void 0;
+exports.manageDashboardGlobalViews = exports.defaultAvailableLocales = exports.defaultAvailableLanguages = exports.defaultLocale = exports.defaultLanguage = exports.loggerCtx = exports.DEFAULT_APP_PATH = void 0;
+const core_1 = require("@vendure/core");
 const path_1 = require("path");
 exports.DEFAULT_APP_PATH = (0, path_1.join)(__dirname, 'dist');
 exports.loggerCtx = 'DashboardPlugin';
@@ -8,3 +9,4 @@ exports.defaultLanguage = 'en';
 exports.defaultLocale = undefined;
 exports.defaultAvailableLanguages = ['en', 'de', 'es', 'cs', 'zh_Hans', 'pt_BR', 'pt_PT', 'zh_Hant'];
 exports.defaultAvailableLocales = ['en-US', 'de-DE', 'es-ES', 'zh-CN', 'zh-TW', 'pt-BR', 'pt-PT'];
+exports.manageDashboardGlobalViews = new core_1.RwPermissionDefinition('DashboardGlobalViews');

package/dist/plugin/dashboard.plugin.js

@@ -154,11 +154,24 @@ exports.DashboardPlugin = DashboardPlugin = DashboardPlugin_1 = __decorate([
         },
         providers: [metrics_service_js_1.MetricsService],
         configuration: config => {
+            config.authOptions.customPermissions.push(constants_js_1.manageDashboardGlobalViews);
             config.settingsStoreFields['vendure.dashboard'] = [
                 {
                     name: 'userSettings',
                     scope: core_1.SettingsStoreScopes.user,
                 },
+                {
+                    name: 'globalSavedViews',
+                    scope: core_1.SettingsStoreScopes.global,
+                    requiresPermission: {
+                        read: constants_js_1.manageDashboardGlobalViews.Read,
+                        write: constants_js_1.manageDashboardGlobalViews.Write,
+                    },
+                },
+                {
+                    name: 'userSavedViews',
+                    scope: core_1.SettingsStoreScopes.user,
+                },
             ];
             return config;
         },

package/dist/plugin/service/metrics.service.d.ts

@@ -1,6 +1,6 @@
 import { CacheService, Order, RequestContext, TransactionalConnection } from '@vendure/core';
 import { MetricCalculation } from '../config/metrics-strategies.js';
-import { MetricInterval, MetricSummary, MetricSummaryInput } from '../types.js';
+import { DashboardMetricSummary, DashboardMetricSummaryInput } from '../types.js';
 export type MetricData = {
     date: Date;
     orders: Order[];
@@ -10,6 +10,6 @@ export declare class MetricsService {
     private cacheService;
     metricCalculations: MetricCalculation[];
     constructor(connection: TransactionalConnection, cacheService: CacheService);
-    getMetrics(ctx: RequestContext, { interval, types, refresh }: MetricSummaryInput): Promise<MetricSummary[]>;
-    loadData(ctx: RequestContext, interval: MetricInterval, endDate: Date): Promise<Map<number, MetricData>>;
+    getMetrics(ctx: RequestContext, { types, refresh, startDate, endDate }: DashboardMetricSummaryInput): Promise<DashboardMetricSummary[]>;
+    loadData(ctx: RequestContext, startDate: Date, endDate: Date): Promise<Map<string, MetricData>>;
 }

package/dist/plugin/service/metrics.service.js

@@ -11,13 +11,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MetricsService = void 0;
 const common_1 = require("@nestjs/common");
-const shared_utils_1 = require("@vendure/common/lib/shared-utils");
 const core_1 = require("@vendure/core");
 const crypto_1 = require("crypto");
 const date_fns_1 = require("date-fns");
 const metrics_strategies_js_1 = require("../config/metrics-strategies.js");
 const constants_js_1 = require("../constants.js");
-const types_js_1 = require("../types.js");
 let MetricsService = class MetricsService {
     constructor(connection, cacheService) {
         this.connection = connection;
@@ -28,15 +26,15 @@ let MetricsService = class MetricsService {
             new metrics_strategies_js_1.OrderTotalMetric(),
         ];
     }
-    async getMetrics(ctx, { interval, types, refresh }) {
-        // Set 23:59:59.999 as endDate
-        const endDate = (0, date_fns_1.endOfDay)(new Date());
+    async getMetrics(ctx, { types, refresh, startDate, endDate }) {
+        const calculatedStartDate = (0, date_fns_1.startOfDay)(new Date(startDate));
+        const calculatedEndDate = (0, date_fns_1.endOfDay)(new Date(endDate));
         // Check if we have cached result
         const hash = (0, crypto_1.createHash)('sha1')
             .update(JSON.stringify({
-            endDate,
+            startDate: calculatedStartDate,
+            endDate: calculatedEndDate,
             types: types.sort(),
-            interval,
             channel: ctx.channel.token,
         }))
             .digest('base64');
@@ -47,22 +45,21 @@ let MetricsService = class MetricsService {
             return cachedMetricList;
         }
         // No cache, calculating new metrics
-        core_1.Logger.verbose(`No cache hit, calculating ${interval} metrics until ${endDate.toISOString()} for channel ${ctx.channel.token} for all orders`, constants_js_1.loggerCtx);
-        const data = await this.loadData(ctx, interval, endDate);
+        core_1.Logger.verbose(`No cache hit, calculating metrics from ${calculatedStartDate.toISOString()} to ${calculatedEndDate.toISOString()} for channel ${ctx.channel.token} for all orders`, constants_js_1.loggerCtx);
+        const data = await this.loadData(ctx, calculatedStartDate, calculatedEndDate);
         const metrics = [];
         for (const type of types) {
             const metric = this.metricCalculations.find(m => m.type === type);
             if (!metric) {
                 continue;
             }
-            // Calculate entry (month or week)
+            // Calculate entries for each day
             const entries = [];
-            data.forEach(dataPerTick => {
-                entries.push(metric.calculateEntry(ctx, interval, dataPerTick));
+            data.forEach(dataPerDay => {
+                entries.push(metric.calculateEntry(ctx, dataPerDay));
             });
             // Create metric with calculated entries
             metrics.push({
-                interval,
                 title: metric.getTitle(ctx),
                 type: metric.type,
                 entries,
@@ -71,26 +68,11 @@ let MetricsService = class MetricsService {
         await this.cacheService.set(cacheKey, metrics, { ttl: 1000 * 60 * 60 * 2 }); // 2 hours
         return metrics;
     }
-    async loadData(ctx, interval, endDate) {
-        let nrOfEntries;
-        let backInTimeAmount;
+    async loadData(ctx, startDate, endDate) {
         const orderRepo = this.connection.getRepository(ctx, core_1.Order);
-        // What function to use to get the current Tick of a date (i.e. the week or month number)
-        let getTickNrFn;
-        let maxTick;
-        switch (interval) {
-            case types_js_1.MetricInterval.Daily: {
-                nrOfEntries = 30;
-                backInTimeAmount = { days: nrOfEntries };
-                getTickNrFn = date_fns_1.getDayOfYear;
-                maxTick = 365;
-                break;
-            }
-            default:
-                (0, shared_utils_1.assertNever)(interval);
-        }
-        const startDate = (0, date_fns_1.startOfDay)((0, date_fns_1.sub)(endDate, backInTimeAmount));
-        const startTick = getTickNrFn(startDate);
+        // Calculate number of days between start and end
+        const diffTime = Math.abs(endDate.getTime() - startDate.getTime());
+        const nrOfDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
         // Get orders in a loop until we have all
         let skip = 0;
         const take = 1000;
@@ -103,38 +85,40 @@ let MetricsService = class MetricsService {
                 .where('orderChannel.id=:channelId', { channelId: ctx.channelId })
                 .andWhere('order.orderPlacedAt >= :startDate', {
                 startDate: startDate.toISOString(),
+            })
+                .andWhere('order.orderPlacedAt <= :endDate', {
+                endDate: endDate.toISOString(),
             })
                 .skip(skip)
                 .take(take);
             const [items, nrOfOrders] = await query.getManyAndCount();
             orders.push(...items);
-            core_1.Logger.verbose(`Fetched orders ${skip}-${skip + take} for channel ${ctx.channel.token} for ${interval} metrics`, constants_js_1.loggerCtx);
+            core_1.Logger.verbose(`Fetched orders ${skip}-${skip + take} for channel ${ctx.channel.token} for date range metrics`, constants_js_1.loggerCtx);
             skip += items.length;
             if (orders.length >= nrOfOrders) {
                 hasMoreOrders = false;
             }
         }
-        core_1.Logger.verbose(`Finished fetching all ${orders.length} orders for channel ${ctx.channel.token} for ${interval} metrics`, constants_js_1.loggerCtx);
-        const dataPerInterval = new Map();
-        const ticks = [];
-        for (let i = 1; i <= nrOfEntries; i++) {
-            if (startTick + i >= maxTick) {
-                // make sure we don't go over month 12 or week 52
-                ticks.push(startTick + i - maxTick);
-            }
-            else {
-                ticks.push(startTick + i);
-            }
-        }
-        ticks.forEach(tick => {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const ordersInCurrentTick = orders.filter(order => getTickNrFn(order.orderPlacedAt) === tick);
-            dataPerInterval.set(tick, {
-                orders: ordersInCurrentTick,
-                date: (0, date_fns_1.setDayOfYear)(endDate, tick),
+        core_1.Logger.verbose(`Finished fetching all ${orders.length} orders for channel ${ctx.channel.token} for date range metrics`, constants_js_1.loggerCtx);
+        const dataPerDay = new Map();
+        // Create a map entry for each day in the range
+        for (let i = 0; i < nrOfDays; i++) {
+            const currentDate = new Date(startDate);
+            currentDate.setDate(startDate.getDate() + i);
+            const dateKey = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD format
+            // Filter orders for this specific day
+            const ordersForDay = orders.filter(order => {
+                if (!order.orderPlacedAt)
+                    return false;
+                const orderDate = new Date(order.orderPlacedAt).toISOString().split('T')[0];
+                return orderDate === dateKey;
             });
-        });
-        return dataPerInterval;
+            dataPerDay.set(dateKey, {
+                orders: ordersForDay,
+                date: currentDate,
+            });
+        }
+        return dataPerDay;
     }
 };
 exports.MetricsService = MetricsService;

package/dist/plugin/types.d.ts

@@ -1,23 +1,20 @@
-export type MetricSummary = {
-    interval: MetricInterval;
-    type: MetricType;
+export type DashboardMetricSummary = {
+    type: DashboardMetricType;
     title: string;
-    entries: MetricSummaryEntry[];
+    entries: DashboardMetricSummaryEntry[];
 };
-export declare enum MetricType {
+export declare enum DashboardMetricType {
     OrderCount = "OrderCount",
     OrderTotal = "OrderTotal",
     AverageOrderValue = "AverageOrderValue"
 }
-export declare enum MetricInterval {
-    Daily = "Daily"
-}
-export type MetricSummaryEntry = {
+export type DashboardMetricSummaryEntry = {
     label: string;
     value: number;
 };
-export interface MetricSummaryInput {
-    interval: MetricInterval;
-    types: MetricType[];
+export interface DashboardMetricSummaryInput {
+    types: DashboardMetricType[];
     refresh?: boolean;
+    startDate: string;
+    endDate: string;
 }

package/dist/plugin/types.js

@@ -1,13 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MetricInterval = exports.MetricType = void 0;
-var MetricType;
-(function (MetricType) {
-    MetricType["OrderCount"] = "OrderCount";
-    MetricType["OrderTotal"] = "OrderTotal";
-    MetricType["AverageOrderValue"] = "AverageOrderValue";
-})(MetricType || (exports.MetricType = MetricType = {}));
-var MetricInterval;
-(function (MetricInterval) {
-    MetricInterval["Daily"] = "Daily";
-})(MetricInterval || (exports.MetricInterval = MetricInterval = {}));
+exports.DashboardMetricType = void 0;
+var DashboardMetricType;
+(function (DashboardMetricType) {
+    DashboardMetricType["OrderCount"] = "OrderCount";
+    DashboardMetricType["OrderTotal"] = "OrderTotal";
+    DashboardMetricType["AverageOrderValue"] = "AverageOrderValue";
+})(DashboardMetricType || (exports.DashboardMetricType = DashboardMetricType = {}));

package/dist/vite/utils/compiler.js

@@ -20,6 +20,8 @@ export async function compile(options) {
     const { vendureConfigPath, outputPath, pathAdapter, logger = noopLogger, pluginPackageScanner } = options;
     const getCompiledConfigPath = (_a = pathAdapter === null || pathAdapter === void 0 ? void 0 : pathAdapter.getCompiledConfigPath) !== null && _a !== void 0 ? _a : defaultPathAdapter.getCompiledConfigPath;
     const transformTsConfigPathMappings = (_b = pathAdapter === null || pathAdapter === void 0 ? void 0 : pathAdapter.transformTsConfigPathMappings) !== null && _b !== void 0 ? _b : defaultPathAdapter.transformTsConfigPathMappings;
+    // 0. Clear the outputPath
+    fs.removeSync(outputPath);
     // 1. Compile TypeScript files
     const compileStart = Date.now();
     await compileTypeScript({

package/dist/vite/vite-plugin-vendure-dashboard.js

@@ -1,5 +1,5 @@
 import tailwindcss from '@tailwindcss/vite';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import { adminApiSchemaPlugin } from './vite-plugin-admin-api-schema.js';
@@ -30,7 +30,7 @@ export function vendureDashboardPlugin(options) {
         ...(options.disableTansStackRouterPlugin
             ? []
             : [
-                TanStackRouterVite({
+                tanstackRouter({
                     autoCodeSplitting: true,
                     routeFileIgnorePattern: '.graphql.ts|components|hooks|utils',
                     routesDirectory: path.join(packageRoot, 'src/app/routes'),

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.3-master-202509250229",
+    "version": "3.5.0-minor-202509261210",
     "type": "module",
     "repository": {
         "type": "git",
@@ -104,8 +104,8 @@
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.4.3-master-202509250229",
-        "@vendure/core": "^3.4.3-master-202509250229",
+        "@vendure/common": "^3.5.0-minor-202509261210",
+        "@vendure/core": "^3.5.0-minor-202509261210",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -156,5 +156,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "7555f68cec1c4a90ca20bbc2b79798b027dc7c4f"
+    "gitHead": "aa1c6971ebbd4954da1ce77fba1d6022051953db"
 }

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -96,13 +96,18 @@ function CollectionListPage() {
                 }}
                 customizeColumns={{
                     name: {
+                        meta: {
+                            // This column needs the following fields to always be available
+                            // in order to correctly render.
+                            dependencies: ['children', 'breadcrumbs'],
+                        },
                         header: 'Collection Name',
                         cell: ({ row }) => {
                             const isExpanded = row.getIsExpanded();
                             const hasChildren = !!row.original.children?.length;
                             return (
                                 <div
-                                    style={{ marginLeft: (row.original.breadcrumbs.length - 2) * 20 + 'px' }}
+                                    style={{ marginLeft: (row.original.breadcrumbs?.length - 2) * 20 + 'px' }}
                                     className="flex gap-2 items-center"
                                 >
                                     <Button
@@ -143,7 +148,7 @@ function CollectionListPage() {
                                     collectionId={row.original.id}
                                     collectionName={row.original.name}
                                 >
-                                    <Trans>{row.original.productVariants.totalItems} variants</Trans>
+                                    <Trans>{row.original.productVariants?.totalItems} variants</Trans>
                                 </CollectionContentsSheet>
                             );
                         },

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -1,3 +1,4 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
 import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
@@ -89,7 +90,11 @@ function CollectionDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast(i18n.t(creatingNewEntity ? 'Successfully created collection' : 'Successfully updated collection'));
+            toast(
+                i18n.t(
+                    creatingNewEntity ? 'Successfully created collection' : 'Successfully updated collection',
+                ),
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
@@ -147,7 +152,15 @@ function CollectionDetailPage() {
                             control={form.control}
                             name="slug"
                             label={<Trans>Slug</Trans>}
-                            render={({ field }) => <Input {...field} />}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="slug"
+                                    watchFieldName="name"
+                                    entityName="Collection"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
                         />
                     </DetailFormGrid>
                     <TranslatableFormFieldWrapper

package/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -1,3 +1,4 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
@@ -32,7 +33,10 @@ export const Route = createFileRoute('/_authenticated/_facets/facets_/$id')({
         pageId,
         queryDocument: facetDetailDocument,
         breadcrumb(isNew, entity) {
-            return [{ path: '/facets', label: <Trans>Facets</Trans> }, isNew ? <Trans>New facet</Trans> : entity?.name];
+            return [
+                { path: '/facets', label: <Trans>Facets</Trans> },
+                isNew ? <Trans>New facet</Trans> : entity?.name,
+            ];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -124,7 +128,15 @@ function FacetDetailPage() {
                             control={form.control}
                             name="code"
                             label={<Trans>Code</Trans>}
-                            render={({ field }) => <Input {...field} />}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="Facet"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
                         />
                     </DetailFormGrid>
                 </PageBlock>

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -60,6 +60,16 @@ export const productVariantDetailDocument = graphql(
                         name
                     }
                 }
+                options {
+                    id
+                    name
+                    code
+                    group {
+                        id
+                        name
+                        code
+                    }
+                }
                 translations {
                     id
                     languageCode

package/src/app/routes/_authenticated/_products/components/product-option-group-badge.tsx

@@ -0,0 +1,19 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Link } from '@tanstack/react-router';
+import { Edit2 } from 'lucide-react';
+
+interface ProductOptionGroupBadgeProps {
+    id: string;
+    name: string;
+}
+
+export function ProductOptionGroupBadge({ id, name }: ProductOptionGroupBadgeProps) {
+    return (
+        <Badge variant="secondary" className="text-xs">
+            <span>{name}</span>
+            <Link to={`option-groups/${id}`} className="ml-1.5 inline-flex">
+                <Edit2 className="h-3 w-3" />
+            </Link>
+        </Badge>
+    );
+}