@tuturuuu/ui 0.31.0 → 0.33.0

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,7 @@ import { useSubscriptionInvoiceContent } from './hooks/use-subscription-invoice-
 import { createSubscriptionInvoiceWithInternalApi } from './internal-api';
 import { formatInvoiceRecalculationDescription } from './invoice-visibility-format';
 import { ProductSelection } from './product-selection';
+import type { SubscriptionInvoiceProps } from './subscription-invoice-props';
 import type { SelectedProductItem } from './types';
 import {
   formatCoverageRangeLabel,
@@ -82,25 +81,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 +98,7 @@ export function SubscriptionInvoice({
   canReadInvoiceProductStock = true,
   canReadGroupLinkedProducts = true,
   permissionRequestUser,
-}: Props) {
+}: SubscriptionInvoiceProps) {
   const t = useTranslations();
   const locale = useLocale();
   const defaultCurrency = resolveSupportedCurrency(rawDefaultCurrency);
@@ -128,7 +108,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 +149,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 +163,7 @@ export function SubscriptionInvoice({
   const {
     data: products = [],
     error: productsError,
+    refetch: refetchProducts,
     isLoading: productsLoading,
   } = useProducts(wsId, {
     enabled: canReadInvoiceProducts && hasSelectedGroups,
@@ -222,7 +202,6 @@ export function SubscriptionInvoice({
     [selectedGroupIds, blockedGroupIds]
   );
 
-  // State management
   const [selectedWalletId, setSelectedWalletId] = useState<string>(
     defaultWalletId || ''
   );
@@ -268,14 +247,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 +322,7 @@ export function SubscriptionInvoice({
     data: subscriptionInvoiceContext,
     isLoading: subscriptionInvoiceContextLoading,
     error: subscriptionInvoiceContextError,
+    refetch: refetchSubscriptionContext,
   } = useSubscriptionInvoiceContext(
     wsId,
     selectedUserId,
@@ -547,7 +529,6 @@ export function SubscriptionInvoice({
     return map;
   }, [referralDiscountRows]);
 
-  // Use hooks for logic
   useSubscriptionAutoSelection({
     enabled: true,
     selectedGroupIds,
@@ -897,16 +878,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 +931,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}

package/src/components/ui/finance/shared/charts/category-breakdown-chart-body.tsx

@@ -1,13 +1,4 @@
-import type { LegendPayload } from 'recharts';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Legend,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
+import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
 import type { ChartConfig } from '../../../chart';
 import { ChartContainer } from '../../../chart';
 import { CategoryBreakdownLegend } from './category-breakdown-chart-legend';
@@ -28,7 +19,7 @@ interface CategoryBreakdownChartBodyProps {
   hiddenCategories: Set<string>;
   interval: ChartInterval;
   locale: string;
-  onToggleCategory: (entry: LegendPayload) => void;
+  onToggleCategory: (key: string) => void;
 }
 
 export function CategoryBreakdownChartBody({
@@ -43,76 +34,78 @@ export function CategoryBreakdownChartBody({
   onToggleCategory,
 }: CategoryBreakdownChartBodyProps) {
   return (
-    <ChartContainer config={chartConfig} className="h-80 w-full">
-      <BarChart data={chartData}>
-        <CartesianGrid vertical={false} strokeDasharray="3 3" opacity={0.3} />
-        <XAxis
-          dataKey="period"
-          tickLine={false}
-          axisLine={false}
-          tickFormatter={(value) =>
-            formatCategoryBreakdownXAxisTick(String(value), interval, locale)
-          }
-          tick={{ fill: 'hsl(var(--foreground))', opacity: 0.7 }}
-        />
-        <YAxis
-          tickLine={false}
-          axisLine={false}
-          tickFormatter={(value) =>
-            typeof value === 'number' ? formatCompactValue(value) : value
-          }
-          tick={{ fill: 'hsl(var(--foreground))', opacity: 0.7 }}
-          width={60}
-        />
-        <Legend
-          content={(props) => (
-            <CategoryBreakdownLegend
-              hiddenCategories={hiddenCategories}
-              onToggleCategory={onToggleCategory}
-              payload={props.payload}
-            />
-          )}
-          iconType="rect"
-          iconSize={12}
-        />
-        <Tooltip
-          cursor={{ fill: 'hsl(var(--foreground))', opacity: 0.05 }}
-          wrapperStyle={{
-            outline: 'none',
-            zIndex: 100,
-          }}
-          contentStyle={{
-            backgroundColor: 'transparent',
-            border: 'none',
-            padding: 0,
-            boxShadow: 'none',
-          }}
-          content={
-            <CategoryBreakdownTooltipContent
-              locale={locale}
-              interval={interval}
-              formatValue={formatValue}
-              categories={categories}
-              hiddenCategories={hiddenCategories}
-            />
-          }
-        />
-        {categories.map((category) => (
-          <Bar
-            key={category.id || 'uncategorized'}
-            dataKey={category.name}
-            stackId="categories"
-            fill={
-              hiddenCategories.has(category.name)
-                ? 'transparent'
-                : category.color
+    <div className="grid min-w-0 gap-5 xl:grid-cols-[minmax(0,1fr)_18rem]">
+      <ChartContainer
+        config={chartConfig}
+        className="aspect-auto h-72 w-full min-w-0 sm:h-80"
+      >
+        <BarChart data={chartData}>
+          <CartesianGrid vertical={false} strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="period"
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(value) =>
+              formatCategoryBreakdownXAxisTick(String(value), interval, locale)
+            }
+            tick={{ fill: 'var(--foreground)', opacity: 0.7 }}
+          />
+          <YAxis
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(value) =>
+              typeof value === 'number' ? formatCompactValue(value) : value
             }
-            radius={[0, 0, 0, 0]}
-            maxBarSize={50}
-            hide={hiddenCategories.has(category.name)}
+            tick={{ fill: 'var(--foreground)', opacity: 0.7 }}
+            width={60}
           />
-        ))}
-      </BarChart>
-    </ChartContainer>
+          <Tooltip
+            cursor={{ fill: 'var(--foreground)', opacity: 0.05 }}
+            wrapperStyle={{
+              outline: 'none',
+              zIndex: 100,
+            }}
+            contentStyle={{
+              backgroundColor: 'transparent',
+              border: 'none',
+              padding: 0,
+              boxShadow: 'none',
+            }}
+            content={
+              <CategoryBreakdownTooltipContent
+                locale={locale}
+                interval={interval}
+                formatValue={formatValue}
+                categories={categories}
+                hiddenCategories={hiddenCategories}
+              />
+            }
+          />
+          {categories.map((category) => (
+            <Bar
+              key={category.key}
+              dataKey={category.key}
+              name={category.name}
+              stackId="categories"
+              fill={
+                hiddenCategories.has(category.key)
+                  ? 'transparent'
+                  : category.color
+              }
+              radius={[0, 0, 0, 0]}
+              maxBarSize={50}
+              isAnimationActive={false}
+              hide={hiddenCategories.has(category.key)}
+            />
+          ))}
+        </BarChart>
+      </ChartContainer>
+      <CategoryBreakdownLegend
+        categories={categories}
+        hiddenCategories={hiddenCategories}
+        onToggleCategory={onToggleCategory}
+        formatValue={formatValue}
+      />
+    </div>
   );
 }

package/src/components/ui/finance/shared/charts/category-breakdown-chart-controls.tsx

@@ -50,7 +50,7 @@ export function CategoryBreakdownChartControls({
   const t = useTranslations();
 
   return (
-    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
       <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
         <CardTitle className="text-base sm:text-lg">{chartTitle}</CardTitle>
         <ToggleGroup
@@ -103,6 +103,7 @@ export function CategoryBreakdownChartControls({
                 onClick={onPreviousPeriod}
                 className="h-7 w-7"
                 title={t('finance-analytics.previous-period')}
+                aria-label={t('finance-analytics.previous-period')}
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
@@ -116,6 +117,7 @@ export function CategoryBreakdownChartControls({
                 disabled={dateOffset === 0}
                 className="h-7 w-7"
                 title={t('finance-analytics.next-period')}
+                aria-label={t('finance-analytics.next-period')}
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>

package/src/components/ui/finance/shared/charts/category-breakdown-chart-legend.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { CategoryBreakdownLegend } from './category-breakdown-chart-legend';
+
+describe('category legend', () => {
+  it('toggles a category by stable id and exposes visibility to keyboard users', () => {
+    const toggle = vi.fn();
+    render(
+      <CategoryBreakdownLegend
+        categories={[
+          {
+            key: 'a',
+            id: 'a',
+            name: 'Office',
+            total: 50,
+            color: 'var(--chart-1)',
+          },
+        ]}
+        hiddenCategories={new Set(['a'])}
+        onToggleCategory={toggle}
+        formatValue={() => '•••'}
+      />
+    );
+    const button = screen.getByRole('button', { name: 'Office •••' });
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+    fireEvent.click(button);
+    expect(toggle).toHaveBeenCalledWith('a');
+    expect(screen.queryByText('50')).toBeNull();
+  });
+});

package/src/components/ui/finance/shared/charts/category-breakdown-chart-legend.tsx

@@ -1,45 +1,52 @@
 import { cn } from '@tuturuuu/utils/format';
-import type { LegendPayload } from 'recharts';
+import type { CategoryBreakdownCategory } from './category-breakdown-chart-types';
 
 interface CategoryBreakdownLegendProps {
+  categories: CategoryBreakdownCategory[];
   hiddenCategories: Set<string>;
-  onToggleCategory: (entry: LegendPayload) => void;
-  payload?: readonly LegendPayload[];
+  onToggleCategory: (key: string) => void;
+  formatValue: (value: number) => string;
 }
 
 export function CategoryBreakdownLegend({
+  categories,
   hiddenCategories,
   onToggleCategory,
-  payload,
+  formatValue,
 }: CategoryBreakdownLegendProps) {
-  if (!payload) return null;
-
   return (
-    <div className="flex flex-wrap justify-center gap-3 pt-5">
-      {payload.map((entry) => {
-        const isHidden = hiddenCategories.has(entry.value as string);
+    <div className="grid max-h-64 content-start gap-1 overflow-y-auto rounded-lg border bg-muted/20 p-2 sm:grid-cols-2 xl:max-h-80 xl:grid-cols-1">
+      {categories.map((category) => {
+        const hidden = hiddenCategories.has(category.key);
         return (
           <button
-            key={String(entry.value)}
+            key={category.key}
             type="button"
-            onClick={() => onToggleCategory(entry)}
+            aria-pressed={!hidden}
+            aria-label={`${category.name} ${formatValue(category.total)}`}
+            onClick={() => onToggleCategory(category.key)}
             className={cn(
-              'flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-sm transition-all hover:bg-accent',
-              isHidden && 'opacity-40'
+              'flex min-w-0 items-start gap-2 rounded-md p-2 text-left text-xs transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              hidden && 'opacity-50'
             )}
           >
-            <div
-              className="h-3 w-3 rounded-sm"
-              style={{
-                backgroundColor: entry.color,
-                opacity: isHidden ? 0.4 : 1,
-              }}
-            />
             <span
-              className={cn(isHidden && 'line-through')}
-              style={{ color: 'hsl(var(--foreground))' }}
-            >
-              {entry.value}
+              className="mt-1 size-2.5 shrink-0 rounded-sm"
+              style={{ backgroundColor: category.color }}
+            />
+            <span className="min-w-0 flex-1">
+              <span
+                className={cn(
+                  'line-clamp-2 break-words font-medium',
+                  hidden && 'line-through'
+                )}
+                title={category.name}
+              >
+                {category.name}
+              </span>
+              <span className="mt-1 block text-muted-foreground tabular-nums">
+                {formatValue(category.total)}
+              </span>
             </span>
           </button>
         );