@tuturuuu/ui 0.32.0 → 0.34.0

package/src/components/ui/finance/invoices/hooks/use-invoice-customer-search.test.tsx

@@ -0,0 +1,89 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useInvoiceCustomerSearch } from './use-invoice-customer-search';
+
+const api = vi.hoisted(() => ({ list: vi.fn(), get: vi.fn() }));
+vi.mock('../internal-api', () => ({
+  listWorkspaceUsersWithInternalApi: api.list,
+  getWorkspaceUserWithInternalApi: api.get,
+}));
+
+beforeEach(() => {
+  api.list.mockReset();
+  api.get.mockReset();
+});
+
+function renderSearch(selectedUserId = '') {
+  const client = new QueryClient();
+  function Wrapper({ children }: PropsWithChildren) {
+    return (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+  }
+  return renderHook(
+    () => useInvoiceCustomerSearch('ws-1', '', selectedUserId),
+    {
+      wrapper: Wrapper,
+    }
+  );
+}
+
+describe('invoice customer loading recovery', () => {
+  it('surfaces a failed read immediately and allows a manual retry', async () => {
+    api.list.mockRejectedValueOnce(new Error('Timed out')).mockResolvedValue({
+      data: [{ id: 'customer-1' }],
+      count: 1,
+    });
+    const { result } = renderSearch();
+    await waitFor(() => expect(result.current.error).toBeTruthy());
+    expect(result.current.isLoading).toBe(false);
+    expect(api.list).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      await result.current.refetch();
+    });
+    await waitFor(() => expect(result.current.error).toBeNull());
+    expect(result.current.customers).toEqual([{ id: 'customer-1' }]);
+  });
+
+  it('retries the selected customer as well as the customer list', async () => {
+    api.list.mockResolvedValue({ data: [], count: 0 });
+    api.get
+      .mockRejectedValueOnce(new Error('Timed out'))
+      .mockResolvedValue({ id: 'selected' });
+    const { result } = renderSearch('selected');
+    await waitFor(() => expect(result.current.error).toBeTruthy());
+    await act(async () => {
+      await result.current.refetch();
+    });
+    await waitFor(() =>
+      expect(result.current.selectedUser?.id).toBe('selected')
+    );
+    expect(result.current.error).toBeNull();
+    expect(api.get).toHaveBeenCalledTimes(2);
+  });
+
+  it('ignores an old detail error once the list contains the selected customer', async () => {
+    api.list.mockResolvedValueOnce({ data: [], count: 0 }).mockResolvedValue({
+      data: [{ id: 'selected' }],
+      count: 1,
+    });
+    api.get.mockRejectedValue(new Error('Detail unavailable'));
+    const { result } = renderSearch('selected');
+    await waitFor(() => expect(result.current.error).toBeTruthy());
+    await act(async () => {
+      await result.current.refetch();
+    });
+    await waitFor(() => expect(result.current.error).toBeNull());
+    expect(result.current.selectedUser?.id).toBe('selected');
+  });
+
+  it('stops offering more customers when an empty page has a stale count', async () => {
+    api.list.mockResolvedValue({ data: [], count: 10 });
+    const { result } = renderSearch();
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.hasNextPage).toBe(false);
+  });
+});

package/src/components/ui/finance/invoices/hooks/use-invoice-customer-search.ts

@@ -0,0 +1,117 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import type { WorkspaceUser } from '@tuturuuu/types/primitives/WorkspaceUser';
+import {
+  getWorkspaceUserWithInternalApi,
+  listWorkspaceUsersWithInternalApi,
+} from '../internal-api';
+
+const INVOICE_CUSTOMER_PAGE_SIZE = 25;
+
+type WorkspaceUsersPage = {
+  data: WorkspaceUser[];
+  count: number;
+  offset: number;
+};
+
+async function fetchInvoiceCustomerPage(
+  wsId: string,
+  searchQuery: string,
+  offset: number
+): Promise<WorkspaceUsersPage> {
+  const payload = await listWorkspaceUsersWithInternalApi(wsId, {
+    from: offset,
+    limit: INVOICE_CUSTOMER_PAGE_SIZE,
+    q: searchQuery.trim() || undefined,
+    to: offset + INVOICE_CUSTOMER_PAGE_SIZE - 1,
+  });
+
+  return {
+    data: payload.data,
+    count: payload.count,
+    offset,
+  };
+}
+
+async function fetchWorkspaceUserById(
+  wsId: string,
+  userId: string
+): Promise<WorkspaceUser | null> {
+  return getWorkspaceUserWithInternalApi(wsId, userId);
+}
+
+export function useInvoiceCustomerSearch(
+  wsId: string,
+  searchQuery: string,
+  selectedUserId: string
+) {
+  const normalizedSearchQuery = searchQuery.trim();
+
+  const usersQuery = useInfiniteQuery({
+    queryKey: ['invoice-customer-search', wsId, normalizedSearchQuery],
+    queryFn: async ({ pageParam = 0 }) =>
+      fetchInvoiceCustomerPage(wsId, normalizedSearchQuery, pageParam),
+    initialPageParam: 0,
+    placeholderData: (previousData) => previousData,
+    getNextPageParam: (lastPage, allPages) => {
+      const loadedCount = allPages.reduce(
+        (total, page) => total + page.data.length,
+        0
+      );
+      return lastPage.data.length > 0 && loadedCount < lastPage.count
+        ? loadedCount
+        : undefined;
+    },
+    enabled: !!wsId,
+    retry: false,
+    staleTime: 30 * 1000,
+    gcTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false,
+  });
+
+  const loadedCustomers =
+    usersQuery.data?.pages.flatMap((page) => page.data) ?? [];
+  const needsSelectedUser =
+    !!wsId &&
+    !!selectedUserId &&
+    !loadedCustomers.some((user) => user.id === selectedUserId);
+  const selectedUserQuery = useQuery({
+    queryKey: ['invoice-customer', wsId, selectedUserId],
+    queryFn: async () => fetchWorkspaceUserById(wsId, selectedUserId),
+    enabled: needsSelectedUser,
+    retry: false,
+    staleTime: 30 * 1000,
+    gcTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false,
+  });
+
+  const customersById = new Map<string, WorkspaceUser>();
+
+  if (selectedUserQuery.data) {
+    customersById.set(selectedUserQuery.data.id, selectedUserQuery.data);
+  }
+
+  for (const customer of loadedCustomers) {
+    customersById.set(customer.id, customer);
+  }
+
+  const customers = Array.from(customersById.values());
+  const selectedUser =
+    (selectedUserId
+      ? customers.find((user) => user.id === selectedUserId)
+      : undefined) ?? undefined;
+
+  return {
+    ...usersQuery,
+    customers,
+    selectedUser,
+    error:
+      usersQuery.error ?? (needsSelectedUser ? selectedUserQuery.error : null),
+    isLoading: usersQuery.isLoading || selectedUserQuery.isLoading,
+    isFetchingSelectedUser: selectedUserQuery.isFetching,
+    refetch: () =>
+      Promise.all([
+        usersQuery.refetch(),
+        ...(needsSelectedUser ? [selectedUserQuery.refetch()] : []),
+      ]),
+  };
+}

package/src/components/ui/finance/invoices/hooks/use-subscription-auto-selection.test.tsx

@@ -0,0 +1,255 @@
+import { renderHook } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { Product, SelectedProductItem, UserGroupProducts } from '../types';
+import type { UserGroup } from '../utils';
+import { useSubscriptionAutoSelection } from './use-subscription-auto-selection';
+
+const translate = (key: string) => key;
+vi.mock('next-intl', () => ({ useTranslations: () => translate }));
+vi.mock('@tuturuuu/ui/sonner', () => ({ toast: vi.fn() }));
+
+const inventory = {
+  unit_id: 'unit',
+  warehouse_id: 'warehouse',
+  amount: null,
+  min_amount: 0,
+  price: 100,
+  unit_name: 'Session',
+  warehouse_name: 'Main',
+};
+const products: Product[] = [
+  {
+    id: 'tuition',
+    name: 'Tuition',
+    manufacturer: null,
+    description: null,
+    usage: null,
+    category: null,
+    category_id: 'cat',
+    ws_id: 'ws',
+    created_at: null,
+    inventory: [inventory],
+  },
+];
+const groupProducts: UserGroupProducts[] = [
+  {
+    group_id: 'class-a',
+    workspace_products: {
+      id: 'tuition',
+      name: 'Tuition',
+      product_categories: { name: null },
+    },
+    inventory_units: { id: 'unit', name: 'Session' },
+    warehouse_id: 'warehouse',
+  },
+];
+const userGroups: UserGroup[] = [
+  {
+    workspace_user_groups: {
+      id: 'class-a',
+      name: 'Class A',
+      starting_date: '2026-01-01',
+      ending_date: null,
+      sessions: ['2026-01-05', '2026-01-12'],
+    } as NonNullable<UserGroup['workspace_user_groups']>,
+  },
+];
+const baseProps = {
+  enabled: true,
+  selectedGroupIds: ['class-a'],
+  selectedMonth: '2026-01',
+  groupProducts,
+  products,
+  userGroups,
+  useAttendanceBased: false,
+  userAttendance: [],
+  latestSubscriptionInvoices: [],
+};
+
+type Props = Omit<
+  Parameters<typeof useSubscriptionAutoSelection>[0],
+  'onSelectedProductsChange'
+>;
+function useSelection(props: Props) {
+  const [selected, setSelected] = useState<SelectedProductItem[]>([]);
+  useSubscriptionAutoSelection({
+    ...props,
+    onSelectedProductsChange: setSelected,
+  });
+  return selected;
+}
+
+describe('subscription selection reflects current billable sessions', () => {
+  it('clears prior charges when switching to a month with no sessions', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+    rerender({ ...baseProps, selectedMonth: '2026-02' });
+    expect(result.current).toEqual([]);
+  });
+
+  it('clears prior charges after payment coverage makes the month fully paid', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current).toHaveLength(1);
+    rerender({
+      ...baseProps,
+      latestSubscriptionInvoices: [
+        { group_id: 'class-a', valid_until: '2026-02-01' },
+      ],
+    });
+    expect(result.current).toEqual([]);
+  });
+
+  it('keeps charges for an earlier gap when a later month was explicitly paid', () => {
+    const { result } = renderHook(useSelection, {
+      initialProps: {
+        ...baseProps,
+        latestSubscriptionInvoices: [
+          {
+            group_id: 'class-a',
+            valid_until: '2026-03-01',
+            covered_months: ['2026-02-01'],
+          },
+        ],
+      } as Props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+
+  it('clears charges for an explicitly paid month without relying on expiry', () => {
+    const { result } = renderHook(useSelection, {
+      initialProps: {
+        ...baseProps,
+        latestSubscriptionInvoices: [
+          { group_id: 'class-a', covered_months: ['2026-01-01'] },
+        ],
+      } as Props,
+    });
+    expect(result.current).toEqual([]);
+  });
+
+  it('clears charges when linked inventory becomes unavailable', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current).toHaveLength(1);
+    rerender({
+      ...baseProps,
+      products: [{ ...products[0]!, inventory: [{ ...inventory, amount: 0 }] }],
+    });
+    expect(result.current).toEqual([]);
+  });
+
+  it('repopulates charges when switching back to a billable month', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: { ...baseProps, selectedMonth: '2026-02' } as Props,
+    });
+    expect(result.current).toEqual([]);
+    rerender(baseProps);
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+});
+
+describe('subscription class and inventory updates', () => {
+  it('updates the selected price when inventory pricing refreshes', () => {
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: baseProps as Props,
+    });
+    expect(result.current[0]?.inventory.price).toBe(100);
+    rerender({
+      ...baseProps,
+      products: [
+        { ...products[0]!, inventory: [{ ...inventory, price: 150 }] },
+      ],
+    });
+    expect(result.current[0]?.inventory.price).toBe(150);
+  });
+
+  it('keeps the unpaid class when another selected class is covered', () => {
+    const otherGroup = {
+      workspace_user_groups: {
+        ...userGroups[0]!.workspace_user_groups!,
+        id: 'class-b',
+      },
+    };
+    const props: Props = {
+      ...baseProps,
+      selectedGroupIds: ['class-a', 'class-b'],
+      userGroups: [...userGroups, otherGroup],
+      groupProducts: [
+        ...groupProducts,
+        { ...groupProducts[0]!, group_id: 'class-b' },
+      ],
+    };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2, 2]);
+    rerender({
+      ...props,
+      latestSubscriptionInvoices: [
+        { group_id: 'class-a', valid_until: '2026-02-01' },
+      ],
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+
+  it('counts only present and late attendance in attendance-based billing', () => {
+    const props: Props = {
+      ...baseProps,
+      useAttendanceBased: true,
+      userAttendance: [
+        { group_id: 'class-a', date: '2026-01-05', status: 'PRESENT' },
+        { group_id: 'class-a', date: '2026-01-12', status: 'LATE' },
+        { group_id: 'class-a', date: '2026-01-19', status: 'ABSENT' },
+        { group_id: 'class-b', date: '2026-01-05', status: 'PRESENT' },
+      ],
+    };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+    rerender({ ...props, userAttendance: [] });
+    expect(result.current).toEqual([]);
+  });
+
+  it('respects finite stock and updates when stock recovers', () => {
+    const props: Props = {
+      ...baseProps,
+      products: [{ ...products[0]!, inventory: [{ ...inventory, amount: 1 }] }],
+    };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([1]);
+    rerender(baseProps);
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+
+  it('does not populate selection while auto-selection is disabled', () => {
+    const { result } = renderHook(useSelection, {
+      initialProps: { ...baseProps, enabled: false },
+    });
+    expect(result.current).toEqual([]);
+  });
+});
+
+describe('prefilled subscription quantities', () => {
+  it('retains an explicit initial quantity until billing inputs change', () => {
+    const props: Props = { ...baseProps, prefillAmount: 5 };
+    const { result, rerender } = renderHook(useSelection, {
+      initialProps: props,
+    });
+    expect(result.current.map((row) => row.quantity)).toEqual([5]);
+    rerender(props);
+    expect(result.current.map((row) => row.quantity)).toEqual([5]);
+    rerender({ ...props, selectedMonth: '2026-02' });
+    expect(result.current).toEqual([]);
+    rerender(props);
+    expect(result.current.map((row) => row.quantity)).toEqual([2]);
+  });
+});

package/src/components/ui/finance/invoices/hooks/use-subscription-auto-selection.ts

@@ -14,7 +14,7 @@ import type {
   SelectedProductItem,
   UserGroupProducts,
 } from '../types';
-import type { UserGroup } from '../utils';
+import type { SubscriptionCoverageInvoice, UserGroup } from '../utils';
 import {
   getBillableQuantityMapForGroupsRange,
   getEffectiveDays,
@@ -31,11 +31,7 @@ interface UseSubscriptionAutoSelectionProps {
   userGroups: UserGroup[];
   useAttendanceBased: boolean;
   userAttendance: { status: string; date: string; group_id?: string }[];
-  latestSubscriptionInvoices: {
-    group_id?: string;
-    valid_until?: string | null;
-    created_at?: string | null;
-  }[];
+  latestSubscriptionInvoices: SubscriptionCoverageInvoice[];
   onSelectedProductsChange: Dispatch<SetStateAction<SelectedProductItem[]>>;
   prepaidMonthCount?: number;
   workspaceTimezone?: string | null;
@@ -129,7 +125,7 @@ const areSelectedProductsEqual = (
   if (current.length !== next.length) return false;
 
   const toKey = (item: SelectedProductItem) =>
-    `${item.product.id}|${item.inventory.unit_id}|${item.inventory.warehouse_id}|${item.quantity}`;
+    `${item.product.id}|${item.inventory.unit_id}|${item.inventory.warehouse_id}|${item.inventory.price}|${item.inventory.amount}|${item.quantity}`;
 
   const buildCounts = (items: SelectedProductItem[]) => {
     const counts = new Map<string, number>();
@@ -155,11 +151,7 @@ const areSelectedProductsEqual = (
 const computeGroupAttendanceDaysMap = (
   selectedGroupIds: string[],
   userGroups: UserGroup[],
-  latestSubscriptionInvoices: {
-    group_id?: string;
-    valid_until?: string | null;
-    created_at?: string | null;
-  }[],
+  latestSubscriptionInvoices: SubscriptionCoverageInvoice[],
   selectedMonth: string,
   userAttendance: { status: string; date: string; group_id?: string }[],
   useAttendanceBased: boolean,
@@ -192,11 +184,7 @@ const computeFallbackAttendanceDays = ({
   userGroups,
 }: {
   groupAttendanceDaysMap: Record<string, number>;
-  latestSubscriptionInvoices: {
-    group_id?: string;
-    valid_until?: string | null;
-    created_at?: string | null;
-  }[];
+  latestSubscriptionInvoices: SubscriptionCoverageInvoice[];
   prepaidMonthCount: number;
   selectedGroupIds: string[];
   selectedMonth: string;
@@ -313,9 +301,7 @@ export function useSubscriptionAutoSelection({
     const isGroupChanged = previousGroupIdRef.current !== currentGroupIdsKey;
     previousGroupIdRef.current = currentGroupIdsKey;
 
-    if (!isGroupChanged) return;
-
-    fallbackToastShownRef.current = false;
+    if (isGroupChanged) fallbackToastShownRef.current = false;
 
     const shouldUsePrefill =
       prepaidMonthCount === 1 &&
@@ -356,76 +342,4 @@ export function useSubscriptionAutoSelection({
     groupAttendanceDaysMap,
     prepaidMonthCount,
   ]);
-
-  // Auto-add group products based on attendance when group is selected
-  useEffect(() => {
-    if (
-      !enabled ||
-      sortedSelectedGroupIds.length === 0 ||
-      groupProducts.length === 0
-    ) {
-      return;
-    }
-
-    if (
-      prepaidMonthCount === 1 &&
-      prefillAmount != null &&
-      !initialPrefillUsedRef.current
-    ) {
-      return;
-    }
-
-    const attendanceDays = computeFallbackAttendanceDays({
-      groupAttendanceDaysMap,
-      latestSubscriptionInvoices,
-      prepaidMonthCount,
-      selectedGroupIds: sortedSelectedGroupIds,
-      selectedMonth,
-      useAttendanceBased,
-      userAttendance,
-      userGroups,
-    });
-
-    if (attendanceDays === 0) return;
-
-    const { autoSelected, fallbackTriggered } =
-      buildAutoSelectedProductsForGroup(
-        groupProducts,
-        products,
-        attendanceDays,
-        groupAttendanceDaysMap
-      );
-
-    if (autoSelected.length === 0) return;
-
-    onSelectedProductsChange((prev) =>
-      areSelectedProductsEqual(prev, autoSelected) ? prev : autoSelected
-    );
-
-    if (fallbackTriggered && !fallbackToastShownRef.current) {
-      toast(
-        t('ws-invoices.inventory_fallback_used', {
-          default:
-            'Some items used fallback warehouses due to missing preference.',
-        })
-      );
-      fallbackToastShownRef.current = true;
-    }
-  }, [
-    enabled,
-    sortedSelectedGroupIds,
-    selectedMonth,
-    userAttendance?.length,
-    prefillAmount,
-    groupProducts,
-    userGroups,
-    useAttendanceBased,
-    t,
-    userAttendance,
-    latestSubscriptionInvoices,
-    onSelectedProductsChange,
-    products,
-    groupAttendanceDaysMap,
-    prepaidMonthCount,
-  ]);
 }

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

@@ -0,0 +1,93 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { UserGroup } from '../utils';
+import { useSubscriptionInvoiceContent } from './use-subscription-invoice-content';
+
+const translate = Object.assign(
+  (key: string, values?: Record<string, unknown>) =>
+    values?.monthName ? String(values.monthName) : key,
+  { has: () => true }
+);
+vi.mock('next-intl', () => ({ useTranslations: () => translate }));
+const base = {
+  enabled: true,
+  selectedGroupIds: ['g1'],
+  selectedMonth: '2026-01',
+  prepaidMonthCount: 3,
+  userGroups: [
+    {
+      workspace_user_groups: {
+        id: 'g1',
+        name: 'Class A',
+        sessions: [],
+        ws_id: 'ws',
+        archived: false,
+        cert_template: 'original',
+        created_at: null,
+        creator_id: null,
+        description: null,
+        ending_date: null,
+        is_course_published: false,
+        is_guest: false,
+        notes: null,
+        starting_date: '2026-01-01',
+      },
+    },
+  ] satisfies UserGroup[],
+  groupProducts: [],
+  subscriptionSelectedProducts: [],
+  userAttendance: [],
+  isSelectedMonthPaid: false,
+  locale: 'en',
+  onNotesChange: vi.fn(),
+};
+describe('subscription invoice month descriptions', () => {
+  it('lists separated unpaid months without claiming the paid month between them', () => {
+    const onContentChange = vi.fn();
+    renderHook(() =>
+      useSubscriptionInvoiceContent({
+        ...base,
+        onContentChange,
+        latestSubscriptionInvoices: [
+          {
+            group_id: 'g1',
+            valid_until: '2026-03-01',
+            covered_months: ['2026-02-01'],
+          },
+        ],
+      })
+    );
+    expect(onContentChange).toHaveBeenLastCalledWith(
+      'January 2026, March 2026'
+    );
+  });
+  it('keeps a compact range for contiguous unpaid months', () => {
+    const onContentChange = vi.fn();
+    renderHook(() =>
+      useSubscriptionInvoiceContent({
+        ...base,
+        onContentChange,
+        latestSubscriptionInvoices: [],
+      })
+    );
+    expect(onContentChange).toHaveBeenLastCalledWith(
+      'January 2026 - March 2026'
+    );
+  });
+  it('does not substitute a future expiry for the selected fully covered range', () => {
+    const onContentChange = vi.fn();
+    renderHook(() =>
+      useSubscriptionInvoiceContent({
+        ...base,
+        onContentChange,
+        isSelectedMonthPaid: true,
+        latestSubscriptionInvoices: [
+          { group_id: 'g1', valid_until: '2027-01-01' },
+        ],
+      })
+    );
+    expect(onContentChange).toHaveBeenLastCalledWith(
+      'January 2026 - March 2026'
+    );
+  });
+});