@tuturuuu/ui 0.31.0 → 0.33.0

package/src/components/ui/finance/invoices/invoice-history.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { History, Loader2, RotateCcw, Search } from '@tuturuuu/icons';
+import {
+  getInvoiceHistory,
+  type InvoiceHistoryEntry,
+  restoreInvoice,
+} from '@tuturuuu/internal-api/finance';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@tuturuuu/ui/alert-dialog';
+import { Button } from '@tuturuuu/ui/button';
+import { Input } from '@tuturuuu/ui/input';
+import { Skeleton } from '@tuturuuu/ui/skeleton';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { FinanceNumbersVisibilityToggle } from '../shared/numbers-visibility-toggle';
+import {
+  DEFAULT_HISTORY_FILTERS,
+  InvoiceHistoryFilterBar,
+} from './invoice-history-filters';
+import { InvoiceHistoryPagination } from './invoice-history-pagination';
+import { InvoiceHistoryRow } from './invoice-history-row';
+import { invalidateInvoiceMutationQueries } from './query-invalidation';
+
+export function InvoiceHistory({
+  wsId,
+  canRestore,
+}: {
+  wsId: string;
+  canRestore: boolean;
+}) {
+  const t = useTranslations('ws-invoices');
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [filters, setFilters] = useState(DEFAULT_HISTORY_FILTERS);
+  const [deletedOnly, setDeletedOnly] = useState(true);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const [timeZone] = useState(
+    () => Intl.DateTimeFormat().resolvedOptions().timeZone
+  );
+  const [search, setSearch] = useState('');
+  const [submittedSearch, setSubmittedSearch] = useState('');
+  const [selected, setSelected] = useState<InvoiceHistoryEntry | null>(null);
+  const query = useQuery({
+    queryKey: [
+      'invoice-history',
+      wsId,
+      deletedOnly,
+      page,
+      pageSize,
+      submittedSearch,
+      filters,
+    ],
+    placeholderData: (previous, previousQuery) =>
+      previousQuery?.queryKey[1] === wsId ? previous : undefined,
+    staleTime: 30_000,
+    retry: 1,
+    queryFn: () =>
+      getInvoiceHistory(wsId, {
+        q: submittedSearch,
+        entity: filters.entity === 'all' ? undefined : filters.entity,
+        action: filters.action === 'all' ? undefined : filters.action,
+        from: filters.from
+          ? new Date(`${filters.from}T00:00:00`).toISOString()
+          : undefined,
+        to: filters.to
+          ? new Date(`${filters.to}T23:59:59.999`).toISOString()
+          : undefined,
+        sort: filters.sort,
+        deletedOnly,
+        offset: page * pageSize,
+        limit: pageSize,
+      }),
+  });
+  const restore = useMutation({
+    mutationFn: (invoiceId: string) => restoreInvoice(wsId, invoiceId),
+    onSuccess: async () => {
+      setSelected(null);
+      toast.success(t('recovery_success'));
+      await invalidateInvoiceMutationQueries(queryClient, wsId);
+      router.refresh();
+    },
+    onError: () => toast.error(t('recovery_error')),
+  });
+
+  const resetFilters = () => {
+    setFilters(DEFAULT_HISTORY_FILTERS);
+    setSearch('');
+    setSubmittedSearch('');
+    setPage(0);
+  };
+  const hasFilters = !!(
+    submittedSearch ||
+    filters.entity !== 'all' ||
+    filters.action !== 'all' ||
+    filters.from ||
+    filters.to ||
+    filters.sort !== 'desc'
+  );
+
+  const pagination = (
+    <InvoiceHistoryPagination
+      page={page}
+      pageSize={pageSize}
+      hasMore={!!query.data?.hasMore}
+      busy={query.isFetching}
+      failed={query.isError}
+      onPageChange={setPage}
+      onPageSizeChange={(size) => {
+        setPageSize(size);
+        setPage(0);
+      }}
+    />
+  );
+
+  return (
+    <section className="space-y-4" aria-label={t('activity')}>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="max-w-2xl space-y-1">
+          <h2 className="flex items-center gap-2 font-semibold">
+            <History className="size-4" />
+            {t('activity')}
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            {t('activity_description')}
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <FinanceNumbersVisibilityToggle />
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label={t('activity_refresh')}
+            title={t('activity_refresh')}
+            disabled={query.isFetching}
+            onClick={() => query.refetch()}
+          >
+            <RotateCcw className="size-4" />
+          </Button>
+          <Button
+            variant={deletedOnly ? 'secondary' : 'outline'}
+            aria-pressed={deletedOnly}
+            onClick={() => {
+              setDeletedOnly(!deletedOnly);
+              if (!deletedOnly)
+                setFilters({ ...filters, entity: 'all', action: 'all' });
+              setPage(0);
+            }}
+          >
+            {t(deletedOnly ? 'activity_show_all' : 'deleted_invoices')}
+          </Button>
+        </div>
+      </div>
+      {deletedOnly && !query.isError && !!query.data?.data.length && (
+        <div className="space-y-1 rounded-lg border border-destructive/30 bg-destructive/5 p-4">
+          <h3 className="font-medium text-sm">{t('recovery_review_title')}</h3>
+          <p className="text-muted-foreground text-sm">
+            {t('recovery_review_description')}
+          </p>
+        </div>
+      )}
+      <form
+        className="flex flex-wrap gap-2"
+        onSubmit={(event) => {
+          event.preventDefault();
+          setSubmittedSearch(search.trim());
+          setPage(0);
+        }}
+      >
+        <Input
+          className="min-w-48 flex-1"
+          value={search}
+          maxLength={120}
+          onChange={(event) => setSearch(event.target.value)}
+          aria-label={t('activity_search')}
+          placeholder={t('activity_search')}
+        />
+        <Button variant="outline" type="submit">
+          <Search className="size-4" aria-hidden="true" />
+          {t('activity_search_action')}
+        </Button>
+        {hasFilters && (
+          <Button type="button" variant="ghost" onClick={resetFilters}>
+            {t('activity_clear_filters')}
+          </Button>
+        )}
+      </form>
+      <InvoiceHistoryFilterBar
+        value={filters}
+        onChange={(next) => {
+          setFilters(next);
+          if (next.entity !== filters.entity || next.action !== filters.action)
+            setDeletedOnly(false);
+          setPage(0);
+        }}
+      />
+      {pagination}
+      <div
+        className="flex min-h-5 flex-wrap items-center justify-between gap-2 text-muted-foreground text-xs"
+        role="status"
+        aria-live="polite"
+      >
+        <span>{t('activity_timezone', { timeZone })}</span>
+        {query.isFetching && (
+          <span className="flex items-center gap-1.5">
+            <Loader2 className="size-3 animate-spin" aria-hidden="true" />
+            {t('activity_loading')}
+          </span>
+        )}
+      </div>
+      {query.isPending ? (
+        <div role="status" aria-busy="true">
+          <span className="sr-only">{t('loading')}</span>
+          {[0, 1, 2].map((index) => (
+            <Skeleton key={index} className="mb-2 h-32 w-full" />
+          ))}
+        </div>
+      ) : query.isError ? (
+        <div role="alert" className="space-y-3 rounded-lg border p-6">
+          <p>{t('activity_error')}</p>
+          <Button variant="outline" onClick={() => query.refetch()}>
+            {t('activity_retry')}
+          </Button>
+        </div>
+      ) : !query.data.data.length ? (
+        <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground text-sm">
+          <History
+            className="mx-auto mb-3 size-8 opacity-50"
+            aria-hidden="true"
+          />
+          <p>{t('activity_empty')}</p>
+          {hasFilters && (
+            <Button variant="link" onClick={resetFilters}>
+              {t('activity_clear_filters')}
+            </Button>
+          )}
+        </div>
+      ) : (
+        <ol
+          className={`divide-y rounded-lg border transition-opacity ${query.isPlaceholderData ? 'opacity-60' : ''}`}
+          aria-busy={query.isFetching}
+        >
+          {query.data.data.map((entry) => (
+            <InvoiceHistoryRow
+              key={entry.id}
+              entry={entry}
+              timeZone={timeZone}
+              canRestore={canRestore}
+              restoring={restore.isPending || query.isPlaceholderData}
+              onRestore={() => setSelected(entry)}
+            />
+          ))}
+        </ol>
+      )}
+      {pagination}
+      <AlertDialog
+        open={!!selected}
+        onOpenChange={(open) => {
+          if (!open && !restore.isPending) setSelected(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('restore_invoice')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('recovery_confirmation')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <p className="break-all font-mono text-xs">{selected?.invoice_id}</p>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={restore.isPending}>
+              {t('recovery_cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={restore.isPending}
+              onClick={(event) => {
+                event.preventDefault();
+                if (selected) restore.mutate(selected.invoice_id);
+              }}
+            >
+              {t(restore.isPending ? 'recovery_restoring' : 'restore_invoice')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </section>
+  );
+}

package/src/components/ui/finance/invoices/invoice-page.tsx

@@ -1,4 +1,4 @@
-import { FileCheck2, Plus } from '@tuturuuu/icons';
+import { FileCheck2, History, Plus } from '@tuturuuu/icons';
 import {
   createAdminClient,
   createClient,
@@ -25,6 +25,7 @@ import { Skeleton } from '../../skeleton';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../tabs';
 import { InvoiceTotalsChartSkeleton } from './charts/invoice-totals-chart';
 import { InvoiceAnalytics } from './invoice-analytics';
+import { InvoiceHistory } from './invoice-history';
 import { InvoicesTable } from './invoices-table';
 import { PendingInvoicesTab } from './pending-invoices-tab';
 import { PendingInvoicesTable } from './pending-invoices-table';
@@ -245,7 +246,7 @@ export default async function InvoicesPage({
       </Suspense>
 
       <Tabs defaultValue="created" className="w-full">
-        <TabsList className="mb-4">
+        <TabsList className="mb-4 h-auto flex-wrap">
           <TabsTrigger value="created" className="gap-2">
             <FileCheck2 className="h-4 w-4" />
             {t('ws-invoices.created_invoices')}
@@ -254,12 +255,19 @@ export default async function InvoicesPage({
             wsId={wsId}
             label={t('ws-invoices.pending_invoices')}
           />
+          {containsPermission('manage_workspace_audit_logs') && (
+            <TabsTrigger value="activity" className="gap-2">
+              <History className="size-4" aria-hidden="true" />
+              {t('ws-invoices.activity')}
+            </TabsTrigger>
+          )}
         </TabsList>
         <TabsContent value="created">
           <Suspense fallback={<Skeleton className="h-125 w-full" />}>
             <InvoicesTable
               wsId={wsId}
               canDeleteInvoices={canDeleteInvoices}
+              canRestoreInvoices={canCreateInvoices && canDeleteInvoices}
               canExport={canExportFinanceData}
               deleteInvoiceAction={deleteInvoiceAction}
               initialData={initialData}
@@ -276,6 +284,14 @@ export default async function InvoicesPage({
             />
           </Suspense>
         </TabsContent>
+        {containsPermission('manage_workspace_audit_logs') && (
+          <TabsContent value="activity">
+            <InvoiceHistory
+              wsId={wsId}
+              canRestore={canCreateInvoices && canDeleteInvoices}
+            />
+          </TabsContent>
+        )}
       </Tabs>
     </>
   );

package/src/components/ui/finance/invoices/invoiceId/full-invoice-template.tsx

@@ -8,6 +8,7 @@ import { Separator } from '@tuturuuu/ui/separator';
 import { formatCurrency } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { FinanceDisplayAmount } from '../../shared/finance-display-amount';
+import { getSavedInvoiceDiscount } from '../invoice-discount';
 
 export function FullInvoiceTemplate({
   invoice,
@@ -54,12 +55,7 @@ export function FullInvoiceTemplate({
     return total + product.price * product.amount;
   }, 0);
 
-  const discount_amount = promotions.reduce((total, promo) => {
-    if (promo.use_ratio) {
-      return total + (subtotal * promo.value) / 100;
-    }
-    return total + promo.value;
-  }, 0);
+  const discount_amount = getSavedInvoiceDiscount(products, invoice.price);
 
   return (
     <>
@@ -266,7 +262,7 @@ export function FullInvoiceTemplate({
             })}
           />
         </p>
-        {promotions.length > 0 && (
+        {discount_amount > 0 && (
           <p
             className={`mb-2 ${isDarkPreview ? 'text-foreground/70' : 'text-black'}`}
           >

package/src/components/ui/finance/invoices/invoiceId/invoice-details-page.test.tsx

@@ -1,3 +1,4 @@
+import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import InvoiceDetailsPage from './invoice-details-page.js';
 
@@ -10,6 +11,7 @@ type QueryOperation = {
 
 const mocks = vi.hoisted(() => ({
   createAdminClient: vi.fn(),
+  omitPromotions: false,
   invoice: null as Record<string, unknown> | null,
   notFound: vi.fn(() => {
     throw new Error('not-found');
@@ -47,6 +49,7 @@ function resultForTable(table: string) {
   }
 
   if (table === 'finance_invoice_promotions') {
+    if (mocks.omitPromotions) return { data: [], error: null };
     return {
       data: [
         {
@@ -142,6 +145,7 @@ describe('InvoiceDetailsPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mocks.operations.length = 0;
+    mocks.omitPromotions = false;
     mocks.invoice = {
       created_at: '2026-05-01T00:00:00.000Z',
       customer_avatar_url: null,
@@ -209,6 +213,18 @@ describe('InvoiceDetailsPage', () => {
     );
   });
 
+  it('shows the stored discount after reopening even without promotion metadata', async () => {
+    mocks.omitPromotions = true;
+    render(
+      await InvoiceDetailsPage({
+        invoiceId: 'invoice-1',
+        locale: 'en',
+        wsId: 'workspace-1',
+      })
+    );
+    expect(screen.getByText('ws-invoices.discount')).toBeInTheDocument();
+  });
+
   it('does not load invoice children when the invoice is outside the workspace', async () => {
     mocks.invoice = null;
 

package/src/components/ui/finance/invoices/invoiceId/invoice-details-page.tsx

@@ -22,6 +22,7 @@ import 'dayjs/locale/vi';
 import moment from 'moment';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
+import { getSavedInvoiceDiscount } from '../invoice-discount';
 import InvoiceCard from './invoice-card';
 import InvoiceEditForm from './invoice-edit-form';
 
@@ -50,6 +51,7 @@ export default async function InvoiceDetailsPage({
 
   const products = await getProducts(wsId, invoice.id);
   const promotions = await getPromotions(wsId, invoice.id);
+  const savedDiscount = getSavedInvoiceDiscount(products, invoice.price);
   const { data: configs } = await getConfigs(wsId);
 
   return (
@@ -206,6 +208,13 @@ export default async function InvoiceDetailsPage({
                     />
                   ))}
                 </div>
+              ) : savedDiscount > 0 ? (
+                <div className="flex items-center justify-between gap-3 py-3">
+                  <span>{t('ws-invoices.discount')}</span>
+                  <FinanceDisplayAmount
+                    value={formatCurrency(savedDiscount, currency)}
+                  />
+                </div>
               ) : (
                 <div className="py-8 text-center text-muted-foreground">
                   <Percent className="mx-auto mb-3 h-12 w-12 opacity-50" />

package/src/components/ui/finance/invoices/invoices-table.tsx

@@ -32,6 +32,7 @@ type DeleteInvoiceAction = (
 interface Props {
   wsId: string;
   canDeleteInvoices?: boolean;
+  canRestoreInvoices?: boolean;
   canExport?: boolean;
   invoiceType?: 'created' | 'pending';
   deleteInvoiceAction?: DeleteInvoiceAction;
@@ -42,6 +43,7 @@ interface Props {
 export function InvoicesTable({
   wsId,
   canDeleteInvoices = false,
+  canRestoreInvoices = false,
   canExport = false,
   invoiceType = 'created',
   deleteInvoiceAction,
@@ -149,6 +151,7 @@ export function InvoicesTable({
 
   const extraData = {
     canDeleteInvoices,
+    canRestoreInvoices,
     deleteInvoiceAction,
     currency,
   };

package/src/components/ui/finance/invoices/promotion-form.tsx

@@ -100,10 +100,10 @@ export function PromotionForm({
     resolver: zodResolver(formSchema),
     defaultValues: {
       id: data?.id,
-      name: data?.name,
-      description: data?.description,
-      code: data?.code,
-      value: data?.value ? parseInt(data?.value.toString(), 10) : undefined,
+      name: data?.name ?? '',
+      description: data?.description ?? '',
+      code: data?.code ?? '',
+      value: data?.value != null ? Number(data.value) : undefined,
       unit: data?.use_ratio ? 'percentage' : 'currency',
       max_uses: data?.max_uses,
     },
@@ -222,6 +222,7 @@ export function PromotionForm({
                 <FormControl>
                   <Input
                     type="number"
+                    step="any"
                     placeholder={t('ws-inventory-promotions.form.value')}
                     onChange={(e) => field.onChange(e.target.valueAsNumber)}
                     onBlur={field.onBlur}

package/src/components/ui/finance/invoices/query-invalidation.ts

@@ -11,6 +11,7 @@ const INVOICE_MUTATION_QUERY_ROOTS = new Set([
   'daily-chart',
   'infinite-user-invoices',
   'invoice-analytics',
+  'invoice-history',
   'monthly-chart',
   'monthly-closing-balance',
   'monthly-opening-balance',

package/src/components/ui/finance/invoices/row-actions.tsx

@@ -2,7 +2,8 @@
 
 import { useQueryClient } from '@tanstack/react-query';
 import { Ellipsis, Eye } from '@tuturuuu/icons';
-import { deleteInvoice } from '@tuturuuu/internal-api/finance';
+import { InternalApiError } from '@tuturuuu/internal-api';
+import { deleteInvoice, restoreInvoice } from '@tuturuuu/internal-api/finance';
 import type { Invoice } from '@tuturuuu/types/primitives/Invoice';
 import {
   AlertDialog,
@@ -40,6 +41,7 @@ interface InvoiceRowActionsProps {
   row: Row<Invoice>;
   href?: string;
   canDeleteInvoices?: boolean;
+  canRestoreInvoices?: boolean;
   deleteInvoiceAction?: DeleteInvoiceAction;
 }
 
@@ -47,6 +49,7 @@ export function InvoiceRowActions({
   row,
   href,
   canDeleteInvoices = false,
+  canRestoreInvoices = false,
   deleteInvoiceAction,
 }: InvoiceRowActionsProps) {
   const t = useTranslations();
@@ -74,13 +77,41 @@ export function InvoiceRowActions({
 
       if (result.success) {
         await invalidateInvoiceMutationQueries(queryClient, data.ws_id);
-        toast.success(t('ws-invoices.invoice_deleted'));
+        toast.success(t('ws-invoices.invoice_deleted'), {
+          action:
+            deleteInvoiceAction || !canRestoreInvoices
+              ? undefined
+              : {
+                  label: t('ws-invoices.recovery_undo'),
+                  onClick: async () => {
+                    try {
+                      await restoreInvoice(data.ws_id!, data.id!);
+                      await invalidateInvoiceMutationQueries(
+                        queryClient,
+                        data.ws_id!
+                      );
+                      toast.success(t('ws-invoices.recovery_success'));
+                      router.refresh();
+                    } catch {
+                      toast.error(t('ws-invoices.recovery_error'));
+                    }
+                  },
+                },
+        });
         router.refresh();
       } else {
         toast.error(result.message || t('ws-invoices.failed_delete_invoice'));
       }
-    } catch {
-      toast.error(t('ws-invoices.failed_delete_invoice'));
+    } catch (error) {
+      toast.error(
+        t(
+          error instanceof InternalApiError && error.status === 409
+            ? 'ws-invoices.delete_linked_records'
+            : error instanceof InternalApiError && error.status === 503
+              ? 'ws-invoices.delete_unavailable'
+              : 'ws-invoices.failed_delete_invoice'
+        )
+      );
     } finally {
       setIsDeleting(false);
     }

package/src/components/ui/finance/invoices/standard-invoice.tsx

@@ -23,6 +23,7 @@ import { InvoiceBlockedState } from './components/invoice-blocked-state';
 import { InvoiceCheckoutSummary } from './components/invoice-checkout-summary';
 import { InvoiceContentEditor } from './components/invoice-content-editor';
 import { InvoiceCustomerSelectCard } from './components/invoice-customer-select-card';
+import { InvoiceDataState } from './components/invoice-data-state';
 import { InvoicePaymentSettings } from './components/invoice-payment-settings';
 import {
   InvoiceProductsPermissionWarning,
@@ -106,6 +107,7 @@ export function StandardInvoice({
     selectedUser,
     isLoading: usersLoading,
     error: usersError,
+    refetch: refetchUsers,
     hasNextPage: hasMoreCustomers,
     fetchNextPage: fetchMoreCustomers,
     isFetching: isFetchingCustomers,
@@ -114,6 +116,7 @@ export function StandardInvoice({
   const {
     data: products = [],
     error: productsError,
+    refetch: refetchProducts,
     isLoading: productsLoading,
   } = useProducts(wsId, { enabled: canReadInvoiceProducts });
   const { data: availablePromotions = [] } = useAvailablePromotions(
@@ -147,10 +150,12 @@ export function StandardInvoice({
   const { data: blockedGroupIds = [] } = useInvoiceBlockedGroups(wsId, {
     enabled: !!selectedUserId,
   });
-  const { data: userGroups = [], isLoading: userGroupsLoading } = useUserGroups(
-    wsId,
-    selectedUserId
-  );
+  const {
+    data: userGroups = [],
+    isLoading: userGroupsLoading,
+    error: userGroupsError,
+    refetch: refetchUserGroups,
+  } = useUserGroups(wsId, selectedUserId);
 
   const isBlocked = useMemo(() => {
     if (
@@ -443,16 +448,25 @@ export function StandardInvoice({
     }
   };
 
-  if (isLoadingData) {
+  if (
+    isLoadingData ||
+    usersError ||
+    (canReadInvoiceProducts &&
+      productsError &&
+      !isPermissionRequestError(productsError)) ||
+    userGroupsError
+  ) {
     return (
-      <div className="flex items-center justify-center py-8">
-        <div className="flex items-center gap-2">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          <p className="text-muted-foreground text-sm">
-            {t('ws-invoices.loading')}
-          </p>
-        </div>
-      </div>
+      <InvoiceDataState
+        loading={isLoadingData}
+        onRetry={() =>
+          void Promise.all([
+            refetchUsers(),
+            ...(canReadInvoiceProducts ? [refetchProducts()] : []),
+            ...(selectedUserId ? [refetchUserGroups()] : []),
+          ])
+        }
+      />
     );
   }
 
@@ -475,9 +489,6 @@ export function StandardInvoice({
           isFetchingNextPage={isFetchingMoreCustomers}
           hasNextPage={hasMoreCustomers}
           onLoadMore={() => void fetchMoreCustomers()}
-          errorMessage={
-            usersError instanceof Error ? usersError.message : undefined
-          }
           emptyMessage={t('ws-invoices.no_customers_found')}
           searchValue={customerSearch}
           onSearchChange={setCustomerSearch}