@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

package/src/app/routes/_authenticated/_products/components/create-product-options-dialog.tsx

@@ -1,5 +1,4 @@
-import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { Button } from '@/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -7,12 +6,13 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/vdb/components/ui/dialog.js';
-import { Form } from '@/vdb/components/ui/form.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+} from '@/components/ui/dialog.js';
+import { Form } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
@@ -99,16 +99,10 @@ const updateProductVariantDocument = graphql(`
 `);
 
 const formSchema = z.object({
-    optionGroups: z
-        .array(
-            z.object({
-                name: z.string().min(1, 'Option group name is required'),
-                options: z
-                    .array(z.string().min(1, 'Option name is required'))
-                    .min(1, 'At least one option is required'),
-            }),
-        )
-        .min(1, 'At least one option group is required'),
+    optionGroups: z.array(z.object({
+        name: z.string().min(1, 'Option group name is required'),
+        options: z.array(z.string().min(1, 'Option name is required')).min(1, 'At least one option is required'),
+    })).min(1, 'At least one option group is required'),
     existingVariantOptionIds: z.array(z.string()).min(1, 'Must select an option for the existing variant'),
 });
 
@@ -152,11 +146,11 @@ export function CreateProductOptionsDialog({
             setOpen(false);
             onSuccess?.();
         },
-        onError: error => {
+        onError: (error) => {
             toast.error(i18n.t('Failed to create product options'), {
                 description: error instanceof Error ? error.message : i18n.t('Unknown error'),
             });
-        },
+        }
     });
 
     const onSubmit = async (values: FormValues) => {
@@ -165,13 +159,13 @@ export function CreateProductOptionsDialog({
         try {
             // Create all option groups and their options
             const createdOptionGroups = await Promise.all(
-                values.optionGroups.map(async group => {
+                values.optionGroups.map(async (group) => {
                     const result = await createProductOptionGroupMutation.mutateAsync({
                         input: {
                             code: group.name.toLowerCase().replace(/\s+/g, '-'),
                             translations: [
                                 {
-                                    languageCode: 'en',
+                                    languageCode: "en",
                                     name: group.name,
                                 },
                             ],
@@ -179,7 +173,7 @@ export function CreateProductOptionsDialog({
                                 code: option.toLowerCase().replace(/\s+/g, '-'),
                                 translations: [
                                     {
-                                        languageCode: 'en',
+                                        languageCode: "en",
                                         name: option,
                                     },
                                 ],
@@ -194,11 +188,14 @@ export function CreateProductOptionsDialog({
                     });
 
                     return result.createProductOptionGroup;
-                }),
+                })
             );
 
             // Combine existing and newly created option groups
-            const allOptionGroups = [...(productData.product.optionGroups || []), ...createdOptionGroups];
+            const allOptionGroups = [
+                ...(productData.product.optionGroups || []),
+                ...createdOptionGroups,
+            ];
 
             // Map the selected option names to their IDs
             const selectedOptionIds = values.existingVariantOptionIds.map((optionName, index) => {
@@ -230,7 +227,7 @@ export function CreateProductOptionsDialog({
                         optionIds: selectedOptionIds,
                         translations: [
                             {
-                                languageCode: 'en',
+                                languageCode: "en",
                                 name: newVariantName,
                             },
                         ],
@@ -251,10 +248,7 @@ export function CreateProductOptionsDialog({
 
     const removeOptionGroup = (index: number) => {
         const currentGroups = form.getValues('optionGroups');
-        form.setValue(
-            'optionGroups',
-            currentGroups.filter((_, i) => i !== index),
-        );
+        form.setValue('optionGroups', currentGroups.filter((_, i) => i !== index));
     };
 
     const addOption = (groupIndex: number) => {
@@ -267,9 +261,7 @@ export function CreateProductOptionsDialog({
     const removeOption = (groupIndex: number, optionIndex: number) => {
         const currentGroups = form.getValues('optionGroups');
         const updatedGroups = [...currentGroups];
-        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter(
-            (_, i) => i !== optionIndex,
-        );
+        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter((_, i) => i !== optionIndex);
         form.setValue('optionGroups', updatedGroups);
     };
 
@@ -319,10 +311,7 @@ export function CreateProductOptionsDialog({
                                                     name={`optionGroups.${groupIndex}.options.${optionIndex}`}
                                                     label={<Trans>Option name</Trans>}
                                                     render={({ field }) => (
-                                                        <Input
-                                                            {...field}
-                                                            placeholder={i18n.t('e.g. Small')}
-                                                        />
+                                                        <Input {...field} placeholder={i18n.t('e.g. Small')} />
                                                     )}
                                                 />
                                                 {optionIndex > 0 && (
@@ -348,7 +337,12 @@ export function CreateProductOptionsDialog({
                                     </div>
                                 </div>
                             ))}
-                            <Button type="button" variant="outline" size="sm" onClick={addOptionGroup}>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={addOptionGroup}
+                            >
                                 <Plus className="mr-2 h-4 w-4" />
                                 <Trans>Add another option group</Trans>
                             </Button>
@@ -360,10 +354,7 @@ export function CreateProductOptionsDialog({
                                     <Trans>Assign options to existing variant</Trans>
                                 </h3>
                                 <p className="text-sm text-muted-foreground">
-                                    <Trans>
-                                        Select which options should apply to the existing variant "
-                                        {productData.product.variants[0].name}"
-                                    </Trans>
+                                    <Trans>Select which options should apply to the existing variant "{productData.product.variants[0].name}"</Trans>
                                 </p>
                                 {/* Show existing option groups first */}
                                 {productData.product.optionGroups?.map((group, groupIndex) => (
@@ -376,16 +367,14 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={e => {
-                                                    const newValues = [
-                                                        ...form.getValues('existingVariantOptionIds'),
-                                                    ];
+                                                onChange={(e) => {
+                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
                                                     newValues[groupIndex] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
                                                 <option value="">Select an option</option>
-                                                {group.options.map(option => (
+                                                {group.options.map((option) => (
                                                     <option key={option.id} value={option.name}>
                                                         {option.name}
                                                     </option>
@@ -405,14 +394,9 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={e => {
-                                                    const newValues = [
-                                                        ...form.getValues('existingVariantOptionIds'),
-                                                    ];
-                                                    newValues[
-                                                        (productData?.product?.optionGroups?.length || 0) +
-                                                            groupIndex
-                                                    ] = e.target.value;
+                                                onChange={(e) => {
+                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
+                                                    newValues[(productData?.product?.optionGroups?.length || 0) + groupIndex] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
@@ -436,7 +420,7 @@ export function CreateProductOptionsDialog({
                                     createProductOptionGroupMutation.isPending ||
                                     addOptionGroupToProductMutation.isPending ||
                                     updateProductVariantMutation.isPending ||
-                                    (productData?.product?.variants[0] &&
+                                    (productData?.product?.variants[0] && 
                                         form.watch('existingVariantOptionIds').some(value => !value))
                                 }
                             >
@@ -448,4 +432,4 @@ export function CreateProductOptionsDialog({
             </DialogContent>
         </Dialog>
     );
-}
+} 

package/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -1,22 +1,22 @@
-import { Button } from '@/vdb/components/ui/button.js';
+import { useCallback, useMemo, useState } from 'react';
+import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
 import {
     Dialog,
     DialogContent,
-    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
+    DialogDescription,
     DialogTrigger,
-} from '@/vdb/components/ui/dialog.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { normalizeString } from '@/vdb/lib/utils.js';
-import { useMutation } from '@tanstack/react-query';
+} from '@/components/ui/dialog.js';
+import { Button } from '@/components/ui/button.js';
 import { Plus } from 'lucide-react';
-import { useCallback, useState } from 'react';
-import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { Trans } from '@/lib/trans.js';
+import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/graphql/api.js';
+import { useMutation } from '@tanstack/react-query';
+import { normalizeString } from '@/lib/utils.js';
 
 const createProductOptionsMutation = graphql(`
     mutation CreateOptionGroups($input: CreateProductOptionGroupInput!) {

package/src/app/routes/_authenticated/_products/components/create-product-variants.tsx

@@ -1,18 +1,19 @@
-import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
+import { Trans } from '@/lib/trans.js';
 import { Plus, Trash2 } from 'lucide-react';
 import { useEffect, useMemo } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
+import { useQuery } from '@tanstack/react-query';
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Button } from '@/components/ui/button.js';
+import { Card } from '@/components/ui/card.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/graphql/api.js';
 import { OptionValueInput } from './option-value-input.js';
 
 const getStockLocationsDocument = graphql(`
@@ -38,6 +39,7 @@ const optionGroupSchema = z.object({
     values: z.array(optionValueSchema).min(1, { message: 'At least one value is required' }),
 });
 
+
 type VariantOption = {
     name: string;
     value: string;
@@ -97,10 +99,7 @@ interface CreateProductVariantsProps {
     onChange?: ({ data }: { data: VariantConfiguration }) => void;
 }
 
-export function CreateProductVariants({
-    currencyCode = 'USD',
-    onChange,
-}: Readonly<CreateProductVariantsProps>) {
+export function CreateProductVariants({ currencyCode = 'USD', onChange }: CreateProductVariantsProps) {
     const { data: stockLocationsResult } = useQuery({
         queryKey: ['stockLocations'],
         queryFn: () => api.query(getStockLocationsDocument, { options: { take: 100 } }),
@@ -128,10 +127,7 @@ export function CreateProductVariants({
 
     const watchedOptionGroups = watch('optionGroups');
     // memoize the variants
-    const variants = useMemo(
-        () => generateVariants(watchedOptionGroups),
-        [JSON.stringify(watchedOptionGroups)],
-    );
+    const variants = useMemo(() => generateVariants(watchedOptionGroups), [JSON.stringify(watchedOptionGroups)]);
 
     // Use the handleSubmit approach for the entire form
     useEffect(() => {

package/src/app/routes/_authenticated/_products/components/option-value-input.tsx

@@ -1,9 +1,10 @@
-import { Badge } from '@/vdb/components/ui/badge.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Plus, X } from 'lucide-react';
-import { useState } from 'react';
-import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useFieldArray } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
+import { useState } from "react";
+import { Input } from "@/components/ui/input.js";
+import { Button } from "@/components/ui/button.js";
+import { Badge } from "@/components/ui/badge.js";
+import { Plus, X } from "lucide-react";
 
 interface OptionValue {
     value: string;
@@ -15,15 +16,12 @@ interface FormValues {
         name: string;
         values: OptionValue[];
     }[];
-    variants: Record<
-        string,
-        {
-            enabled: boolean;
-            sku: string;
-            price: string;
-            stock: string;
-        }
-    >;
+    variants: Record<string, {
+        enabled: boolean;
+        sku: string;
+        price: string;
+        stock: string;
+    }>;
 }
 
 interface OptionValueInputProps {
@@ -32,11 +30,7 @@ interface OptionValueInputProps {
     disabled?: boolean;
 }
 
-export function OptionValueInput({
-    groupName,
-    groupIndex,
-    disabled = false,
-}: Readonly<OptionValueInputProps>) {
+export function OptionValueInput({ groupName, groupIndex, disabled = false }: OptionValueInputProps) {
     const { control, watch } = useFormContext<FormValues>();
     const { fields, append, remove } = useFieldArray({
         control,
@@ -99,4 +93,4 @@ export function OptionValueInput({
             </div>
         </div>
     );
-}
+}

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

@@ -1,17 +1,21 @@
-import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { useState } from 'react';
+import { Plus, Check, ChevronsUpDown } from 'lucide-react';
+import { Button } from '@/components/ui/button.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
 import {
     Command,
     CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
-} from '@/vdb/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { cn } from '@/vdb/lib/utils.js';
-import { Check, ChevronsUpDown, Plus } from 'lucide-react';
-import { useState } from 'react';
+} from '@/components/ui/command.js';
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/components/ui/popover.js';
+import { cn } from '@/lib/utils.js';
+import { Trans, useLingui } from '@/lib/trans.js';
 
 interface ProductOption {
     id: string;
@@ -33,12 +37,7 @@ interface ProductOptionSelectProps {
     onCreateOption: (name: string) => void;
 }
 
-export function ProductOptionSelect({
-    group,
-    value,
-    onChange,
-    onCreateOption,
-}: Readonly<ProductOptionSelectProps>) {
+export function ProductOptionSelect({ group, value, onChange, onCreateOption }: ProductOptionSelectProps) {
     const [open, setOpen] = useState(false);
     const [newOptionInput, setNewOptionInput] = useState('');
     const { i18n } = useLingui();
@@ -49,24 +48,31 @@ export function ProductOptionSelect({
             name={`options.${group.id}`}
             label={group.name}
             render={() => (
-                <Popover open={open} onOpenChange={setOpen}>
+                <Popover
+                    open={open}
+                    onOpenChange={setOpen}
+                >
                     <PopoverTrigger asChild>
-                        <Button variant="outline" role="combobox" className="w-full justify-between">
-                            {value ? (
-                                group.options.find(option => option.id === value)?.name
-                            ) : (
-                                <Trans>Select {group.name}</Trans>
-                            )}
+                        <Button
+                            variant="outline"
+                            role="combobox"
+                            className="w-full justify-between"
+                        >
+                            {value
+                                ? group.options.find(
+                                    (option) => option.id === value,
+                                )?.name
+                                : <Trans>Select {group.name}</Trans>}
                             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                         </Button>
                     </PopoverTrigger>
                     <PopoverContent className="w-full p-0">
                         <Command>
-                            <CommandInput
-                                placeholder={i18n.t('Search {name}...').replace('{name}', group.name)}
+                            <CommandInput 
+                                placeholder={i18n.t('Search {name}...').replace('{name}', group.name)} 
                                 onValueChange={setNewOptionInput}
                             />
-                            <CommandEmpty className="py-2">
+                            <CommandEmpty className='py-2'>
                                 <div className="p-2">
                                     <Button
                                         variant="outline"
@@ -83,7 +89,7 @@ export function ProductOptionSelect({
                                 </div>
                             </CommandEmpty>
                             <CommandGroup>
-                                {group.options.map(option => (
+                                {group.options.map((option) => (
                                     <CommandItem
                                         key={option.id}
                                         value={option.name}
@@ -94,8 +100,8 @@ export function ProductOptionSelect({
                                     >
                                         <Check
                                             className={cn(
-                                                'mr-2 h-4 w-4',
-                                                value === option.id ? 'opacity-100' : 'opacity-0',
+                                                "mr-2 h-4 w-4",
+                                                value === option.id ? "opacity-100" : "opacity-0"
                                             )}
                                         />
                                         {option.name}
@@ -108,4 +114,4 @@ export function ProductOptionSelect({
             )}
         />
     );
-}
+} 

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -1,97 +1,66 @@
-import { Money } from '@/vdb/components/data-display/money.js';
-import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
-import {
-    PaginatedListDataTable,
-    PaginatedListRefresherRegisterFn,
-} from '@/vdb/components/shared/paginated-list-data-table.js';
-import { StockLevelLabel } from '@/vdb/components/shared/stock-level-label.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
-import { useState } from 'react';
-import { productVariantListDocument } from '../products.graphql.js';
-
-export const deleteProductVariantDocument = graphql(`
-    mutation DeleteProductVariant($id: ID!) {
-        deleteProductVariant(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { Money } from "@/components/data-display/money.js";
+import { PaginatedListDataTable, PaginatedListRefresherRegisterFn } from "@/components/shared/paginated-list-data-table.js";
+import { StockLevelLabel } from "@/components/shared/stock-level-label.js";
+import { useLocalFormat } from "@/hooks/use-local-format.js";
+import { DetailPageButton } from "@/index.js";
+import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
+import { useState } from "react";
+import { productVariantListDocument } from "../products.graphql.js";
 
 interface ProductVariantsTableProps {
     productId: string;
     registerRefresher?: PaginatedListRefresherRegisterFn;
-    fromProductDetailPage?: boolean;
 }
 
-export function ProductVariantsTable({
-    productId,
-    registerRefresher,
-    fromProductDetailPage,
-}: ProductVariantsTableProps) {
+export function ProductVariantsTable({ productId, registerRefresher }: ProductVariantsTableProps) {
     const { formatCurrencyName } = useLocalFormat();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [sorting, setSorting] = useState<SortingState>([]);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
 
-    return (
-        <PaginatedListDataTable
-            registerRefresher={registerRefresher}
-            listQuery={productVariantListDocument}
-            deleteMutation={deleteProductVariantDocument}
-            transformVariables={variables => ({
-                ...variables,
-                productId,
-            })}
-            defaultVisibility={{
-                id: false,
-                currencyCode: false,
-            }}
-            customizeColumns={{
-                name: {
-                    header: 'Variant name',
-                    cell: ({ row: { original } }) => (
-                        <DetailPageButton
-                            href={`../../product-variants/${original.id}`}
-                            label={original.name}
-                            search={fromProductDetailPage ? { from: 'product' } : undefined}
-                        />
-                    ),
-                },
-                currencyCode: {
-                    cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
-                },
-                price: {
-                    cell: ({ row: { original } }) => (
-                        <Money value={original.price} currency={original.currencyCode} />
-                    ),
-                },
-                priceWithTax: {
-                    cell: ({ row: { original } }) => (
-                        <Money value={original.priceWithTax} currency={original.currencyCode} />
-                    ),
-                },
-                stockLevels: {
-                    cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
-                },
-            }}
-            page={page}
-            itemsPerPage={pageSize}
-            sorting={sorting}
-            columnFilters={filters}
-            onPageChange={(_, page, perPage) => {
-                setPage(page);
-                setPageSize(perPage);
-            }}
-            onSortChange={(_, sorting) => {
-                setSorting(sorting);
-            }}
-            onFilterChange={(_, filters) => {
-                setFilters(filters);
-            }}
-        />
-    );
+    return <PaginatedListDataTable
+        registerRefresher={registerRefresher}
+        listQuery={productVariantListDocument}
+        transformVariables={variables => ({
+            ...variables,
+            productId,
+        })}
+        defaultVisibility={{
+            id: false,
+            currencyCode: false,
+        }}
+        customizeColumns={{
+            name: {
+                header: 'Variant name',
+                cell: ({ row: { original } }) => <DetailPageButton href={`../../product-variants/${original.id}`} label={original.name} />,
+            },
+            currencyCode: {
+                cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
+            },
+            price: {
+                cell: ({ row: { original } }) => <Money value={original.price} currency={original.currencyCode} />,
+            },
+            priceWithTax: {
+                cell: ({ row: { original } }) => <Money value={original.priceWithTax} currency={original.currencyCode} />,
+            },
+            stockLevels: {
+                cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
+            },
+        }}
+        page={page}
+        itemsPerPage={pageSize}
+        sorting={sorting}
+        columnFilters={filters}
+        onPageChange={(_, page, perPage) => {
+            setPage(page);
+            setPageSize(perPage);
+        }}
+        onSortChange={(_, sorting) => {
+            setSorting(sorting);
+        }}
+        onFilterChange={(_, filters) => {
+            setFilters(filters);
+        }}
+    />;
 }