@tuturuuu/ui 0.32.0 → 0.34.0

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}

package/src/components/ui/finance/invoices/subscription-coverage.test.ts

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  isSubscriptionMonthCoveredByInvoice as covered,
+  isSubscriptionMonthPaidForGroup as paid,
+  isSubscriptionRangePaidForGroup as range,
+  type SubscriptionCoverageInvoice,
+} from './subscription-coverage';
+import { getGroupPaymentStatus, type WorkspaceUserGroup } from './utils';
+
+const explicit: SubscriptionCoverageInvoice = {
+  group_id: 'g1',
+  valid_until: '2026-04-01T00:00:00Z',
+  covered_months: ['2026-01-01', '2026-03-01'],
+};
+describe('explicit tuition coverage', () => {
+  afterEach(() => vi.useRealTimers());
+  it.each(['2026-01', '2026-03'])('covers recorded month %s', (month) =>
+    expect(covered(month, explicit)).toBe(true)
+  );
+  it.each(['2025-12', '2026-02', '2026-04'])(
+    'does not infer unrecorded month %s from valid_until',
+    (month) => expect(covered(month, explicit)).toBe(false)
+  );
+  it('uses months even without a compatibility expiry', () =>
+    expect(covered('2026-01', { covered_months: ['2026-01-01'] })).toBe(true));
+  it('keeps null legacy coverage semantics', () => {
+    const legacy = { valid_until: '2026-03-01', covered_months: null };
+    expect(covered('2026-02', legacy)).toBe(true);
+    expect(covered('2026-03', legacy)).toBe(false);
+  });
+  it('treats empty explicit coverage as empty rather than legacy', () =>
+    expect(covered('2026-01', { ...explicit, covered_months: [] })).toBe(
+      false
+    ));
+  it('isolates groups', () =>
+    expect(paid('g2', '2026-01', [explicit])).toBe(false));
+  it('combines separate payments without masking gaps', () => {
+    const rows = [explicit, { ...explicit, covered_months: ['2026-02-01'] }];
+    expect(range('g1', '2026-01', 3, [explicit])).toBe(false);
+    expect(range('g1', '2026-01', 3, rows)).toBe(true);
+    expect(range('g1', '2026-01', 4, rows)).toBe(false);
+  });
+  it('combines legacy cutoff and exact modern months', () => {
+    const rows = [explicit, { group_id: 'g1', valid_until: '2026-03-01' }];
+    expect(range('g1', '2026-01', 3, rows)).toBe(true);
+    expect(paid('g1', '2026-04', rows)).toBe(false);
+  });
+  it('does not label an unpaid current-month gap active', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 1, 10));
+    expect(
+      getGroupPaymentStatus({ id: 'g1' } as WorkspaceUserGroup, explicit, [
+        explicit,
+      ])
+    ).toBe('expired');
+  });
+  it('uses all invoices for the current-month badge', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 1, 10));
+    const rows = [explicit, { ...explicit, covered_months: ['2026-02-01'] }];
+    expect(
+      getGroupPaymentStatus({ id: 'g1' } as WorkspaceUserGroup, explicit, rows)
+    ).toBe('active');
+  });
+  it('expires at the next gap rather than the latest paid month', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 0, 25));
+    expect(
+      getGroupPaymentStatus({ id: 'g1' } as WorkspaceUserGroup, explicit, [
+        explicit,
+      ])
+    ).toBe('expiringSoon');
+  });
+});

package/src/components/ui/finance/invoices/subscription-coverage.ts

@@ -0,0 +1,109 @@
+import {
+  getCoverageMonths,
+  getMonthStartDate,
+  parseLocalCalendarDate,
+} from './civil-month';
+export type SubscriptionCoverageInvoice = {
+  created_at?: string | null;
+  group_id?: string;
+  valid_until?: string | null;
+  covered_months?: string[] | null;
+};
+
+const getComparableTimestamp = (value: string | null | undefined): number => {
+  if (!value) return 0;
+  const timestamp = new Date(value).getTime();
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+};
+
+const getComparableValidUntilTimestamp = (
+  invoice: SubscriptionCoverageInvoice
+): number => {
+  const validUntil = parseLocalCalendarDate(invoice.valid_until);
+  return Number.isNaN(validUntil.getTime()) ? 0 : validUntil.getTime();
+};
+
+export const getSubscriptionCoverageInvoiceForGroup = (
+  latestInvoices: SubscriptionCoverageInvoice[],
+  groupId: string
+): SubscriptionCoverageInvoice | undefined =>
+  latestInvoices
+    .filter((invoice) => invoice.group_id === groupId)
+    .filter((invoice) => getComparableValidUntilTimestamp(invoice) > 0)
+    .sort((a, b) => {
+      const validUntilDiff =
+        getComparableValidUntilTimestamp(b) -
+        getComparableValidUntilTimestamp(a);
+      if (validUntilDiff !== 0) return validUntilDiff;
+
+      return (
+        getComparableTimestamp(b.created_at) -
+        getComparableTimestamp(a.created_at)
+      );
+    })[0];
+
+export const isSubscriptionMonthCoveredByInvoice = (
+  selectedMonth: string,
+  invoice: SubscriptionCoverageInvoice | null | undefined
+): boolean => {
+  if (invoice?.covered_months != null)
+    return invoice.covered_months.some(
+      (month) => month.slice(0, 7) === selectedMonth
+    );
+  if (!invoice?.valid_until) return false;
+
+  const selectedMonthStart = getMonthStartDate(selectedMonth);
+  const validUntilMonthStart = getMonthStartDate(invoice.valid_until);
+
+  if (
+    Number.isNaN(selectedMonthStart.getTime()) ||
+    Number.isNaN(validUntilMonthStart.getTime())
+  ) {
+    return false;
+  }
+
+  return selectedMonthStart < validUntilMonthStart;
+};
+
+export const isSubscriptionMonthPaidForGroup = (
+  groupId: string,
+  selectedMonth: string,
+  latestInvoices: SubscriptionCoverageInvoice[]
+): boolean =>
+  latestInvoices.some(
+    (invoice) =>
+      invoice.group_id === groupId &&
+      isSubscriptionMonthCoveredByInvoice(selectedMonth, invoice)
+  );
+
+export const isSubscriptionRangePaidForGroup = (
+  groupId: string,
+  selectedMonth: string,
+  prepaidMonthCount: number,
+  latestInvoices: SubscriptionCoverageInvoice[]
+): boolean => {
+  const coverageMonths = getCoverageMonths(selectedMonth, prepaidMonthCount);
+  if (coverageMonths.length === 0) return false;
+
+  return coverageMonths.every((month) =>
+    isSubscriptionMonthPaidForGroup(groupId, month, latestInvoices)
+  );
+};
+
+export const isSubscriptionRangeFullyPaidForGroups = (
+  groupIds: string[],
+  selectedMonth: string,
+  prepaidMonthCount: number,
+  latestInvoices: SubscriptionCoverageInvoice[]
+): boolean => {
+  if (groupIds.length === 0) return false;
+
+  return groupIds.every((groupId) =>
+    isSubscriptionRangePaidForGroup(
+      groupId,
+      selectedMonth,
+      prepaidMonthCount,
+      latestInvoices
+    )
+  );
+};

package/src/components/ui/finance/invoices/subscription-invoice-props.ts

@@ -0,0 +1,20 @@
+import type { FinancePermissionRequestUser } from '../shared/finance-permission-warning-dialog';
+
+export interface SubscriptionInvoiceProps {
+  wsId: string;
+  prefillQuantity?: number | null;
+  suggestedTotal?: number | null;
+  createMultipleInvoices: boolean;
+  printAfterCreate?: boolean;
+  downloadImageAfterCreate?: boolean;
+  defaultWalletId?: string;
+  defaultCategoryId?: string;
+  defaultCurrency?: string;
+  workspaceTimezone?: string | null;
+  canChangeFinanceWallets?: boolean;
+  canSetFinanceWalletsOnCreate?: boolean;
+  canReadInvoiceProducts?: boolean;
+  canReadInvoiceProductStock?: boolean;
+  canReadGroupLinkedProducts?: boolean;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
+}

package/src/components/ui/finance/invoices/subscription-invoice.test.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { SubscriptionInvoice } from './subscription-invoice';
@@ -37,6 +37,15 @@ const testState = vi.hoisted(() => {
     setMonth: vi.fn(),
     productSelectionInjected: false,
     products: [product],
+    productsError: null as Error | null,
+    userGroupsError: null as Error | null,
+    groupProductsError: null as Error | null,
+    contextError: null as Error | null,
+    refetchUserGroups: vi.fn(),
+    refetchGroupProducts: vi.fn(),
+    refetchContext: vi.fn(),
+    refetchProducts: vi.fn(),
+    refetchUsers: vi.fn(),
     selectedProducts: [{ inventory, product, quantity: 1 }],
     useCategories: vi.fn(),
     useWallets: vi.fn(),
@@ -170,6 +179,7 @@ vi.mock('./hooks', () => ({
   useInvoiceBlockedGroups: () => ({ data: [] }),
   useInvoiceCustomerSearch: () => ({
     customers: [],
+    refetch: testState.refetchUsers,
     error: null,
     fetchNextPage: vi.fn(),
     hasNextPage: false,
@@ -180,21 +190,26 @@ vi.mock('./hooks', () => ({
   }),
   useMultiGroupProducts: () => ({
     data: [],
-    error: null,
+    error: testState.groupProductsError,
+    refetch: testState.refetchGroupProducts,
     isLoading: false,
   }),
   useProducts: () => ({
     data: testState.products,
-    error: null,
+    error: testState.productsError,
+    refetch: testState.refetchProducts,
     isLoading: false,
   }),
   useSubscriptionInvoiceContext: () => ({
     data: { attendance: [], latestInvoices: [] },
-    error: null,
+    error: testState.contextError,
+    refetch: testState.refetchContext,
     isLoading: false,
   }),
   useUserGroups: () => ({
     data: testState.userGroups,
+    error: testState.userGroupsError,
+    refetch: testState.refetchUserGroups,
     isLoading: false,
   }),
   useUserLinkedPromotions: () => ({ data: [] }),
@@ -272,6 +287,15 @@ describe('SubscriptionInvoice checkout defaults', () => {
     testState.useCategories.mockClear();
     testState.useWallets.mockClear();
     testState.productSelectionInjected = false;
+    testState.productsError = null;
+    testState.userGroupsError = null;
+    testState.groupProductsError = null;
+    testState.contextError = null;
+    testState.refetchUserGroups.mockClear();
+    testState.refetchGroupProducts.mockClear();
+    testState.refetchContext.mockClear();
+    testState.refetchProducts.mockClear();
+    testState.refetchUsers.mockClear();
     testState.month = '2026-07';
     testState.setMonth.mockClear();
     testState.userGroups[0]!.workspace_user_groups.ending_date = null;
@@ -281,6 +305,49 @@ describe('SubscriptionInvoice checkout defaults', () => {
     testState.categories = [];
   });
 
+  it('shows a retry when product loading fails and reopens the form after recovery', async () => {
+    testState.productsError = new Error('Timed out');
+    const { rerender } = renderSubscriptionInvoice();
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'ws-invoices.load_failed'
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'common.retry' }));
+    expect(testState.refetchProducts).toHaveBeenCalledOnce();
+    expect(testState.refetchUsers).toHaveBeenCalledOnce();
+
+    testState.productsError = null;
+    rerender(
+      <SubscriptionInvoice wsId="ws-1" createMultipleInvoices={false} />
+    );
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(testState.InvoicePaymentSettings).toHaveBeenCalled()
+    );
+  });
+
+  it.each(['userGroupsError', 'groupProductsError', 'contextError'] as const)(
+    'recovers from a failed subscription %s read',
+    async (key) => {
+      testState[key] = new Error('Timed out');
+      const { rerender } = renderSubscriptionInvoice();
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        'ws-invoices.load_failed'
+      );
+      fireEvent.click(screen.getByRole('button', { name: 'common.retry' }));
+      expect(testState.refetchUserGroups).toHaveBeenCalledOnce();
+      expect(testState.refetchGroupProducts).toHaveBeenCalledOnce();
+      expect(testState.refetchContext).toHaveBeenCalledOnce();
+      testState[key] = null;
+      rerender(
+        <SubscriptionInvoice wsId="ws-1" createMultipleInvoices={false} />
+      );
+      await waitFor(() =>
+        expect(testState.InvoicePaymentSettings).toHaveBeenCalled()
+      );
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    }
+  );
+
   it('preloads payment options from defaults and keeps default IDs while options load', async () => {
     const { rerender } = renderSubscriptionInvoice();
 

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

@@ -21,15 +21,13 @@ import {
 } from 'react';
 import { useDebounce } from '../../../../hooks/use-debounce';
 import { useFinanceHref } from '../finance-route-context';
-import {
-  type FinancePermissionRequestUser,
-  FinancePermissionWarningDialog,
-} from '../shared/finance-permission-warning-dialog';
+import { FinancePermissionWarningDialog } from '../shared/finance-permission-warning-dialog';
 import { useFinanceConfidentialVisibility } from '../shared/use-finance-confidential-visibility';
 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,
@@ -63,6 +61,8 @@ import { useSubscriptionInvoiceContent } from './hooks/use-subscription-invoice-
 import { createSubscriptionInvoiceWithInternalApi } from './internal-api';
 import { formatInvoiceRecalculationDescription } from './invoice-visibility-format';
 import { ProductSelection } from './product-selection';
+import { invalidateInvoiceMutationQueries } from './query-invalidation';
+import type { SubscriptionInvoiceProps } from './subscription-invoice-props';
 import type { SelectedProductItem } from './types';
 import {
   formatCoverageRangeLabel,
@@ -82,25 +82,6 @@ import {
   resolveSubscriptionInvoiceCategoryId,
 } from './utils';
 
-interface Props {
-  wsId: string;
-  prefillQuantity?: number | null;
-  suggestedTotal?: number | null;
-  createMultipleInvoices: boolean;
-  printAfterCreate?: boolean;
-  downloadImageAfterCreate?: boolean;
-  defaultWalletId?: string;
-  defaultCategoryId?: string;
-  defaultCurrency?: string;
-  workspaceTimezone?: string | null;
-  canChangeFinanceWallets?: boolean;
-  canSetFinanceWalletsOnCreate?: boolean;
-  canReadInvoiceProducts?: boolean;
-  canReadInvoiceProductStock?: boolean;
-  canReadGroupLinkedProducts?: boolean;
-  permissionRequestUser?: FinancePermissionRequestUser | null;
-}
-
 export function SubscriptionInvoice({
   wsId,
   prefillQuantity,
@@ -118,7 +99,7 @@ export function SubscriptionInvoice({
   canReadInvoiceProductStock = true,
   canReadGroupLinkedProducts = true,
   permissionRequestUser,
-}: Props) {
+}: SubscriptionInvoiceProps) {
   const t = useTranslations();
   const locale = useLocale();
   const defaultCurrency = resolveSupportedCurrency(rawDefaultCurrency);
@@ -128,7 +109,6 @@ export function SubscriptionInvoice({
   const queryClient = useQueryClient();
   const financeHref = useFinanceHref();
 
-  // URL state using nuqs
   const [selectedUserId, setSelectedUserId] = useQueryState('user_id', {
     defaultValue: '',
     shallow: false,
@@ -170,12 +150,12 @@ export function SubscriptionInvoice({
     [selectedGroupIds]
   );
 
-  // Data queries
   const {
     customers: users,
     selectedUser,
     isLoading: usersLoading,
     error: usersError,
+    refetch: refetchUsers,
     hasNextPage: hasMoreCustomers,
     fetchNextPage: fetchMoreCustomers,
     isFetching: isFetchingCustomers,
@@ -184,6 +164,7 @@ export function SubscriptionInvoice({
   const {
     data: products = [],
     error: productsError,
+    refetch: refetchProducts,
     isLoading: productsLoading,
   } = useProducts(wsId, {
     enabled: canReadInvoiceProducts && hasSelectedGroups,
@@ -222,7 +203,6 @@ export function SubscriptionInvoice({
     [selectedGroupIds, blockedGroupIds]
   );
 
-  // State management
   const [selectedWalletId, setSelectedWalletId] = useState<string>(
     defaultWalletId || ''
   );
@@ -268,14 +248,16 @@ export function SubscriptionInvoice({
   // Track previous user ID to detect user changes (skip initial mount for reset)
   const prevUserIdRef = useRef<string | null>(null);
 
-  // Subscription-specific queries
-  const { data: userGroups = [], isLoading: userGroupsLoading } = useUserGroups(
-    wsId,
-    selectedUserId
-  );
+  const {
+    data: userGroups = [],
+    isLoading: userGroupsLoading,
+    error: userGroupsError,
+    refetch: refetchUserGroups,
+  } = useUserGroups(wsId, selectedUserId);
   const {
     data: groupProducts = [],
     error: groupProductsError,
+    refetch: refetchGroupProducts,
     isLoading: groupProductsLoading,
   } = useMultiGroupProducts(wsId, selectedGroupIds, {
     enabled: canReadGroupLinkedProducts,
@@ -341,6 +323,7 @@ export function SubscriptionInvoice({
     data: subscriptionInvoiceContext,
     isLoading: subscriptionInvoiceContextLoading,
     error: subscriptionInvoiceContextError,
+    refetch: refetchSubscriptionContext,
   } = useSubscriptionInvoiceContext(
     wsId,
     selectedUserId,
@@ -547,7 +530,6 @@ export function SubscriptionInvoice({
     return map;
   }, [referralDiscountRows]);
 
-  // Use hooks for logic
   useSubscriptionAutoSelection({
     enabled: true,
     selectedGroupIds,
@@ -819,7 +801,7 @@ export function SubscriptionInvoice({
 
     setIsCreating(true);
     try {
-      const requestPayload = {
+      const result = await createSubscriptionInvoiceWithInternalApi(wsId, {
         customer_id: selectedUserId,
         group_ids: selectedGroupIdsForCreate,
         selected_month: effectiveSelectedMonth,
@@ -834,12 +816,8 @@ export function SubscriptionInvoice({
         frontend_discount_amount: discountAmount,
         frontend_total: subscriptionRoundedTotal,
         prepaid_month_count: prepaidMonthCount,
-      };
-
-      const result = await createSubscriptionInvoiceWithInternalApi(wsId, {
-        ...requestPayload,
-        customer_id: selectedUserId,
       });
+      void invalidateInvoiceMutationQueries(queryClient, wsId);
 
       if (result.data?.values_recalculated) {
         const { calculated_values, frontend_values } = result.data;
@@ -897,16 +875,37 @@ export function SubscriptionInvoice({
     }
   };
 
-  if (isLoadingData) {
+  if (
+    isLoadingData ||
+    usersError ||
+    (selectedUserId && userGroupsError) ||
+    (hasSelectedGroups &&
+      canReadGroupLinkedProducts &&
+      groupProductsError &&
+      !isPermissionRequestError(groupProductsError)) ||
+    (selectedUserId &&
+      hasSelectedGroups &&
+      subscriptionInvoiceContextError &&
+      !isPermissionRequestError(subscriptionInvoiceContextError)) ||
+    (canReadInvoiceProducts &&
+      hasSelectedGroups &&
+      productsError &&
+      !isPermissionRequestError(productsError))
+  ) {
     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 || isLoadingSubscriptionData}
+        onRetry={() => {
+          void refetchUsers();
+          if (selectedUserId) void refetchUserGroups();
+          if (selectedUserId && hasSelectedGroups)
+            void refetchSubscriptionContext();
+          if (hasSelectedGroups && canReadGroupLinkedProducts)
+            void refetchGroupProducts();
+          if (canReadInvoiceProducts && hasSelectedGroups)
+            void refetchProducts();
+        }}
+      />
     );
   }
 
@@ -929,9 +928,6 @@ export function SubscriptionInvoice({
           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}