@vendure/dashboard 3.2.3 → 3.3.0

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

@@ -2,7 +2,6 @@
 
 import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
 import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
-import { Badge } from '@/components/ui/badge.js';
 import { Input } from '@/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
 import {
@@ -19,9 +18,12 @@ import {
     VisibilityState,
 } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
-import { CircleX, Filter } from 'lucide-react';
 import React, { Suspense, useEffect } from 'react';
+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;
@@ -30,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;
@@ -41,6 +43,7 @@ interface DataTableProps<TData, TValue> {
     onPageChange?: (table: TableType<TData>, page: number, itemsPerPage: number) => void;
     onSortChange?: (table: TableType<TData>, sorting: SortingState) => void;
     onFilterChange?: (table: TableType<TData>, columnFilters: ColumnFilter[]) => void;
+    onColumnVisibilityChange?: (table: TableType<TData>, columnVisibility: VisibilityState) => void;
     onSearchTermChange?: (searchTerm: string) => void;
     defaultColumnVisibility?: VisibilityState;
     facetedFilters?: { [key: string]: FacetedFilter | undefined };
@@ -50,27 +53,31 @@ 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,
-    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();
     const [pagination, setPagination] = React.useState<PaginationState>({
         pageIndex: (page ?? 1) - 1,
         pageSize: itemsPerPage ?? 10,
@@ -117,6 +124,11 @@ export function DataTable<TData, TValue>({
     useEffect(() => {
         onFilterChange?.(table, columnFilters);
     }, [columnFilters]);
+
+    useEffect(() => {
+        onColumnVisibilityChange?.(table, columnVisibility);
+    }, [columnVisibility]);
+
     return (
         <>
             <div className="flex justify-between items-start">
@@ -142,34 +154,27 @@ export function DataTable<TData, TValue>({
                                 />
                             ))}
                         </Suspense>
+                        <AddFilterMenu columns={table.getAllColumns()} />
                     </div>
                     <div className="flex gap-1">
                         {columnFilters
                             .filter(f => !facetedFilters?.[f.id])
                             .map(f => {
-                                const [operator, value] = Object.entries(
-                                    f.value as Record<string, string>,
-                                )[0];
-                                return (
-                                    <Badge key={f.id} className="flex gap-1 items-center" variant="secondary">
-                                        <Filter size="12" className="opacity-50" />
-                                        <div>{f.id}</div>
-                                        <div>{operator}</div>
-                                        <div>{value}</div>
-                                        <button
-                                            className="cursor-pointer"
-                                            onClick={() =>
-                                                setColumnFilters(old => old.filter(x => x.id !== f.id))
-                                            }
-                                        >
-                                            <CircleX size="14" />
-                                        </button>
-                                    </Badge>
-                                );
+                                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))} />;
                             })}
                     </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>
@@ -182,9 +187,9 @@ export function DataTable<TData, TValue>({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
                                         </TableHead>
                                     );
                                 })}

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -0,0 +1,57 @@
+import { Trans } from "@/lib/trans.js";
+
+import { Select, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.js";
+
+import { SelectContent } from "@/components/ui/select.js";
+import { useEffect, useState } from "react";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableBooleanFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
+
+export function DataTableBooleanFilter({ value: incomingValue, onChange }: DataTableBooleanFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] ?? 'eq' : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<boolean>(initialValue as boolean ?? true);
+
+    useEffect(() => {
+        onChange({ [operator]: value });
+    }, [operator, value]);
+
+    return (
+        <div className="flex flex-col md:flex-row gap-2">
+            <Select value={operator} onValueChange={value => setOperator(value)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                    {BOOLEAN_OPERATORS.map(op => (
+                        <SelectItem key={op} value={op}>
+                            <HumanReadableOperator operator={op} />
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {operator !== 'isNull' && (
+                <Select value={value.toString()} onValueChange={v => setValue(v === 'true')}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select value" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="true">
+                            <Trans>True</Trans>
+                        </SelectItem>
+                        <SelectItem value="false">
+                            <Trans>False</Trans>
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -0,0 +1,93 @@
+import { Trans } from "@/lib/trans.js";
+import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
+import { SelectContent } from "@/components/ui/select.js";
+import { useEffect, useState } from "react";
+import { DateTimeInput } from "@/components/data-input/datetime-input.js";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableDateTimeFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const DATETIME_OPERATORS = ['eq', 'before', 'after', 'between', 'isNull'] as const;
+
+export function DataTableDateTimeFilter({ value: incomingValue, onChange }: DataTableDateTimeFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<Date | undefined>(initialValue ? new Date(initialValue) : undefined);
+    const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+    const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+            return;
+        }
+
+        if (operator === 'between') {
+            if (!startDate && !endDate) {
+                onChange({});
+                return;
+            }
+            if (!startDate || !endDate) {
+                setError('Please enter both start and end dates');
+                return;
+            }
+            if (startDate > endDate) {
+                setError('Start date must be before end date');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: { start: startDate.toISOString(), end: endDate.toISOString() } });
+        } else {
+            if (!value) {
+                onChange({});
+                return;
+            }
+            setError('');
+            onChange({ [operator]: value.toISOString() });
+        }
+    }, [operator, value, startDate, endDate]);
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-col md:flex-row gap-2">
+                <Select value={operator} onValueChange={value => setOperator(value)}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {DATETIME_OPERATORS.map(op => (
+                            <SelectItem key={op} value={op}>
+                                <HumanReadableOperator operator={op} />
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {operator !== 'isNull' && (
+                    operator === 'between' ? (
+                        <div className="space-y-2">
+                            <DateTimeInput
+                                value={startDate}
+                                onChange={setStartDate}
+                            />
+                            <DateTimeInput
+                                value={endDate}
+                                onChange={setEndDate}
+                            />
+                        </div>
+                    ) : (
+                        <DateTimeInput
+                            value={value}
+                            onChange={setValue}
+                        />
+                    )
+                )}
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-id-filter.tsx

@@ -0,0 +1,58 @@
+import { Trans } from "@/lib/trans.js";
+
+import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
+
+import { SelectContent } from "@/components/ui/select.js";
+import { Input } from "@/components/ui/input.js";
+import { useEffect, useState } from "react";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableIdFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const ID_OPERATORS = ['eq', 'notEq', 'in', 'notIn', 'isNull'] as const;
+
+export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableIdFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<string>(initialValue ?? '');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+        } else if (operator === 'in' || operator === 'notIn') {
+            // Split by comma and trim whitespace
+            const values = value.split(',').map(v => v.trim()).filter(v => v);
+            onChange({ [operator]: values });
+        } else {
+            onChange({ [operator]: value });
+        }
+    }, [operator, value]);
+
+    return (
+        <div className="flex flex-col md:flex-row gap-2">
+            <Select value={operator} onValueChange={value => setOperator(value)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                    {ID_OPERATORS.map(op => (
+                        <SelectItem key={op} value={op}>
+                            <HumanReadableOperator operator={op} />
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {operator !== 'isNull' && (
+                <Input
+                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated IDs..." : "Enter ID..."}
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -0,0 +1,119 @@
+import { Trans } from "@/lib/trans.js";
+import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
+import { SelectContent } from "@/components/ui/select.js";
+import { Input } from "@/components/ui/input.js";
+import { MoneyInput } from "@/components/data-input/money-input.js";
+import { useEffect, useState } from "react";
+import { useChannel } from "@/hooks/use-channel.js";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableNumberFilterProps {
+    mode: 'number' | 'money';
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const NUMBER_OPERATORS = ['eq', 'gt', 'gte', 'lt', 'lte', 'isNull', 'between'] as const;
+
+export function DataTableNumberFilter({ mode, value: incomingValue, onChange }: DataTableNumberFilterProps) {
+    const { activeChannel } = useChannel();
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : 0;
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<string>(initialValue?.toString() ?? '');
+    const [minValue, setMinValue] = useState<string>('');
+    const [maxValue, setMaxValue] = useState<string>('');
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+            return;
+        }
+
+        if (operator === 'between') {
+            if (!minValue && !maxValue) {
+                onChange({});
+                return;
+            }
+            if (!minValue || !maxValue) {
+                setError('Please enter both min and max values');
+                return;
+            }
+            const minNum = parseFloat(minValue);
+            const maxNum = parseFloat(maxValue);
+            if (isNaN(minNum) || isNaN(maxNum)) {
+                setError('Please enter valid numbers');
+                return;
+            }
+            if (minNum > maxNum) {
+                setError('Min value must be less than max value');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: { start: minNum, end: maxNum } });
+        } else {
+            if (!value) {
+                onChange({});
+                return;
+            }
+            const numValue = parseFloat(value);
+            if (isNaN(numValue)) {
+                setError('Please enter a valid number');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: numValue });
+        }
+    }, [operator, value, minValue, maxValue]);
+
+    const renderInput = (value: string, onChange: (value: string) => void, placeholder: string) => {
+        if (mode === 'money') {
+            return (
+                <MoneyInput
+                    value={parseFloat(value) || 0}
+                    onChange={(newValue) => onChange(newValue.toString())}
+                    currency={activeChannel?.defaultCurrencyCode ?? 'USD'}
+                />
+            );
+        }
+        return (
+            <Input
+                type="number"
+                placeholder={placeholder}
+                value={value}
+                onChange={e => onChange(e.target.value)}
+            />
+        );
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-col md:flex-row gap-2">
+                <Select value={operator} onValueChange={value => setOperator(value)}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {NUMBER_OPERATORS.map(op => (
+                            <SelectItem key={op} value={op}>
+                                <HumanReadableOperator operator={op} />
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {operator !== 'isNull' && (
+                    operator === 'between' ? (
+                        <div className="flex gap-2">
+                            {renderInput(minValue, setMinValue, "Min")}
+                            {renderInput(maxValue, setMaxValue, "Max")}
+                        </div>
+                    ) : (
+                        renderInput(value, setValue, "Enter value...")
+                    )
+                )}
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-string-filter.tsx

@@ -0,0 +1,62 @@
+import { Trans } from "@/lib/trans.js";
+
+import { Select, SelectValue, SelectTrigger, SelectItem } from "@/components/ui/select.js";
+
+import { SelectContent } from "@/components/ui/select.js";
+import { Input } from "@/components/ui/input.js";
+import { useEffect, useState } from "react";
+import { HumanReadableOperator } from "../human-readable-operator.js";
+
+export interface DataTableStringFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'] as const;
+
+export function DataTableStringFilter({ value: incomingValue, onChange }: DataTableStringFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'contains';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
+    const [value, setValue] = useState((initialValue as string) ?? '');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+        } else if (operator === 'in' || operator === 'notIn') {
+            // Split by comma and trim whitespace
+            if (typeof value === 'string') {
+                const values = value.split(',').map(v => v.trim()).filter(v => v);
+                onChange({ [operator]: values });
+            } else {
+                onChange({ [operator]: [] });
+            }
+        } else {
+            onChange({ [operator]: value });
+        }
+    }, [operator, value]);
+
+    return (
+        <div className="flex flex-col md:flex-row gap-2">
+            <Select value={operator} onValueChange={value => setOperator(value)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                    {STRING_OPERATORS.map(op => (
+                        <SelectItem key={op} value={op}>
+                            <HumanReadableOperator operator={op} />
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {operator !== 'isNull' && (
+                <Input
+                    placeholder={operator === 'in' || operator === 'notIn' ? "Enter comma-separated values..." : "Enter filter value..."}
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            )}
+        </div>
+    )
+}

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -0,0 +1,65 @@
+import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
+import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
+import { ID_OPERATORS } from './filters/data-table-id-filter.js';
+import { NUMBER_OPERATORS } from './filters/data-table-number-filter.js';
+import { STRING_OPERATORS } from './filters/data-table-string-filter.js';
+import { Trans } from '@/lib/trans.js';
+
+type Operator =
+    | (typeof DATETIME_OPERATORS)[number]
+    | (typeof BOOLEAN_OPERATORS)[number]
+    | (typeof ID_OPERATORS)[number]
+    | (typeof NUMBER_OPERATORS)[number]
+    | (typeof STRING_OPERATORS)[number];
+
+export function HumanReadableOperator({
+    operator,
+    mode = 'long',
+}: {
+    operator: Operator;
+    mode?: 'short' | 'long';
+}) {
+    switch (operator) {
+        case 'eq':
+            return mode === 'short' ? <Trans>=</Trans> : <Trans>is equal to</Trans>;
+        case 'notEq':
+            return mode === 'short' ? <Trans>!=</Trans> : <Trans>is not equal to</Trans>;
+        case 'before':
+            return mode === 'short' ? <Trans>before</Trans> : <Trans>is before</Trans>;
+        case 'after':
+            return mode === 'short' ? <Trans>after</Trans> : <Trans>is after</Trans>;
+        case 'between':
+            return mode === 'short' ? <Trans>between</Trans> : <Trans>is between</Trans>;
+        case 'isNull':
+            return mode === 'short' ? <Trans>is null</Trans> : <Trans>is null</Trans>;
+        case 'in':
+            return mode === 'short' ? <Trans>in</Trans> : <Trans>is in</Trans>;
+        case 'notIn':
+            return mode === 'short' ? <Trans>not in</Trans> : <Trans>is not in</Trans>;
+        case 'gt':
+            return mode === 'short' ? <Trans>greater than</Trans> : <Trans>is greater than</Trans>;
+        case 'gte':
+            return mode === 'short' ? (
+                <Trans>greater than or equal</Trans>
+            ) : (
+                <Trans>is greater than or equal to</Trans>
+            );
+        case 'lt':
+            return mode === 'short' ? <Trans>less than</Trans> : <Trans>is less than</Trans>;
+        case 'lte':
+            return mode === 'short' ? (
+                <Trans>less than or equal</Trans>
+            ) : (
+                <Trans>is less than or equal to</Trans>
+            );
+        case 'contains':
+            return mode === 'short' ? <Trans>contains</Trans> : <Trans>contains</Trans>;
+        case 'notContains':
+            return mode === 'short' ? <Trans>does not contain</Trans> : <Trans>does not contain</Trans>;
+        case 'regex':
+            return mode === 'short' ? <Trans>matches regex</Trans> : <Trans>matches regex</Trans>;
+        default:
+            operator satisfies never;
+            return <Trans>{operator}</Trans>;
+    }
+}

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>
+    );
+}