@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/finance/wallets/wallets-data-table.test.tsx

@@ -0,0 +1,171 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ReactElement } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { WalletsDataTable } from './wallets-data-table';
+
+const mocks = vi.hoisted(() => ({
+  dataTableProps: undefined as
+    | {
+        data?: Array<{ id: string; name?: string | null }>;
+        onRefresh?: () => void;
+        onSearch?: (query: string) => void;
+      }
+    | undefined,
+  listInfiniteWallets: vi.fn(),
+  replace: vi.fn(),
+  searchParams: new URLSearchParams(),
+}));
+
+vi.mock('@tuturuuu/internal-api/finance', () => ({
+  listInfiniteWallets: (
+    ...args: Parameters<typeof mocks.listInfiniteWallets>
+  ) => mocks.listInfiniteWallets(...args),
+}));
+
+vi.mock('@tuturuuu/ui/custom/modifiable-dialog-trigger', () => ({
+  default: () => null,
+}));
+
+vi.mock('@tuturuuu/ui/custom/tables/data-table', () => ({
+  DataTable: (props: {
+    data?: Array<{ id: string; name?: string | null }>;
+    onRefresh?: () => void;
+    onSearch?: (query: string) => void;
+  }) => {
+    mocks.dataTableProps = props;
+
+    return (
+      <div data-testid="wallet-table">
+        {(props.data ?? []).map((wallet) => (
+          <div key={wallet.id}>{wallet.name}</div>
+        ))}
+      </div>
+    );
+  },
+}));
+
+vi.mock('@tuturuuu/ui/finance/wallets/columns', () => ({
+  walletColumns: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/ui/finance/wallets/form', () => ({
+  WalletForm: () => null,
+}));
+
+vi.mock('@tuturuuu/ui/hooks/use-exchange-rates', () => ({
+  useExchangeRates: () => ({
+    data: {
+      data: [],
+    },
+  }),
+}));
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/ws-1/finance/wallets',
+  useRouter: () => ({
+    replace: (...args: Parameters<typeof mocks.replace>) =>
+      mocks.replace(...args),
+  }),
+  useSearchParams: () => mocks.searchParams,
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations:
+    () => (key: string, values?: Record<string, string | number>) =>
+      values
+        ? `${key}:${Object.values(values)
+            .map((value) => String(value))
+            .join(',')}`
+        : key,
+}));
+
+vi.mock('../shared/use-finance-balance-mode', () => ({
+  useFinanceBalanceMode: () => ({
+    mode: 'audited',
+  }),
+}));
+
+function renderWithQueryClient(ui: ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+}
+
+describe('wallets data table infinite loading', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.dataTableProps = undefined;
+    mocks.searchParams = new URLSearchParams();
+
+    globalThis.IntersectionObserver = class IntersectionObserver {
+      disconnect() {}
+      observe() {}
+      takeRecords() {
+        return [];
+      }
+      unobserve() {}
+    } as unknown as typeof IntersectionObserver;
+
+    mocks.listInfiniteWallets.mockImplementation(
+      async (
+        _workspaceId: string,
+        query: {
+          offset?: number;
+        }
+      ) => {
+        if (query.offset === 20) {
+          return {
+            data: [{ id: 'wallet-2', name: 'Bank' }],
+            hasMore: false,
+            nextOffset: null,
+            totalCount: 2,
+          };
+        }
+
+        return {
+          data: [{ id: 'wallet-1', name: 'Cash' }],
+          hasMore: true,
+          nextOffset: 20,
+          totalCount: 2,
+        };
+      }
+    );
+  });
+
+  it('loads the next server page from the fallback load-more button', async () => {
+    renderWithQueryClient(
+      <WalletsDataTable wsId="ws-1" currency="USD" query="bank" />
+    );
+
+    expect(await screen.findByText('Cash')).toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'wallet-data-table.load_more' })
+    );
+
+    expect(await screen.findByText('Bank')).toBeInTheDocument();
+    expect(mocks.listInfiniteWallets).toHaveBeenCalledWith('ws-1', {
+      limit: 20,
+      offset: 20,
+      q: 'bank',
+    });
+  });
+
+  it('keeps search in the URL and drops legacy page params', async () => {
+    mocks.searchParams = new URLSearchParams('page=2&pageSize=50');
+
+    renderWithQueryClient(<WalletsDataTable wsId="ws-1" currency="USD" />);
+
+    await waitFor(() => expect(mocks.dataTableProps).toBeDefined());
+    mocks.dataTableProps?.onSearch?.(' cash ');
+
+    expect(mocks.replace).toHaveBeenCalledWith('/ws-1/finance/wallets?q=cash');
+  });
+});

package/src/components/ui/finance/wallets/wallets-data-table.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import { useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import { ChevronDown, Loader2 } from '@tuturuuu/icons';
+import { listInfiniteWallets } from '@tuturuuu/internal-api/finance';
 import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import { Button } from '@tuturuuu/ui/button';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
 import { DataTable } from '@tuturuuu/ui/custom/tables/data-table';
 import { walletColumns } from '@tuturuuu/ui/finance/wallets/columns';
@@ -9,32 +12,29 @@ import { WalletForm } from '@tuturuuu/ui/finance/wallets/form';
 import { useExchangeRates } from '@tuturuuu/ui/hooks/use-exchange-rates';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { type ReactNode, useCallback, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useFinanceBalanceMode } from '../shared/use-finance-balance-mode';
+
+const WALLET_PAGE_SIZE = 20;
 
 interface WalletsDataTableProps {
   wsId: string;
-  data: Wallet[];
-  count: number;
-  filters?: ReactNode[];
   canUpdateWallets?: boolean;
   canDeleteWallets?: boolean;
   currency?: string;
+  financePrefix?: string;
   isPersonalWorkspace?: boolean;
-  page?: string;
-  pageSize?: string;
+  query?: string;
 }
 
 export function WalletsDataTable({
   wsId,
-  data,
-  count,
-  filters,
   canUpdateWallets,
   canDeleteWallets,
   currency = 'USD',
+  financePrefix = '/finance',
   isPersonalWorkspace,
-  page,
-  pageSize,
+  query,
 }: WalletsDataTableProps) {
   const t = useTranslations();
   const router = useRouter();
@@ -42,6 +42,32 @@ export function WalletsDataTable({
   const searchParams = useSearchParams();
   const queryClient = useQueryClient();
   const { data: exchangeRatesResponse } = useExchangeRates();
+  const { mode: balanceMode } = useFinanceBalanceMode();
+  const loadMoreRef = useRef<HTMLDivElement | null>(null);
+  const normalizedQuery = query?.trim() ?? '';
+  const walletsQuery = useInfiniteQuery({
+    queryKey: ['wallets', wsId, 'infinite', normalizedQuery, WALLET_PAGE_SIZE],
+    queryFn: ({ pageParam }) =>
+      listInfiniteWallets(wsId, {
+        limit: WALLET_PAGE_SIZE,
+        offset: pageParam,
+        q: normalizedQuery,
+      }),
+    getNextPageParam: (lastPage) => lastPage.nextOffset ?? undefined,
+    initialPageParam: 0,
+  });
+  const wallets = useMemo(
+    () =>
+      (walletsQuery.data?.pages.flatMap((page) => page.data) ?? []).map(
+        (wallet) => ({
+          ...wallet,
+          href: `/${wsId}${financePrefix}/wallets/${wallet.id}`,
+          ws_id: wsId,
+        })
+      ),
+    [financePrefix, walletsQuery.data?.pages, wsId]
+  );
+  const totalCount = walletsQuery.data?.pages.at(0)?.totalCount ?? 0;
 
   // State for edit dialog
   const [selectedWallet, setSelectedWallet] = useState<Wallet | null>(null);
@@ -63,42 +89,73 @@ export function WalletsDataTable({
     });
   }, [queryClient, wsId]);
 
-  const handleSetParams = useCallback(
-    (params: { page?: number; pageSize?: string }) => {
+  const updateSearchQuery = useCallback(
+    (nextQuery: string) => {
       const newSearchParams = new URLSearchParams(searchParams?.toString());
+      const trimmedQuery = nextQuery.trim();
 
-      if (params.page !== undefined) {
-        newSearchParams.set('page', params.page.toString());
-      }
-
-      if (params.pageSize !== undefined) {
-        newSearchParams.set('pageSize', params.pageSize);
+      if (trimmedQuery) {
+        newSearchParams.set('q', trimmedQuery);
+      } else {
+        newSearchParams.delete('q');
       }
+      newSearchParams.delete('page');
+      newSearchParams.delete('pageSize');
 
-      router.push(`${pathname}?${newSearchParams.toString()}`);
+      const queryString = newSearchParams.toString();
+      router.replace(queryString ? `${pathname}?${queryString}` : pathname);
     },
     [pathname, router, searchParams]
   );
 
-  const pageIndex = page ? Number.parseInt(page, 10) - 1 : 0;
-  const pageSizeValue = pageSize ? Number.parseInt(pageSize, 10) : 10;
+  const resetSearchQuery = useCallback(() => {
+    updateSearchQuery('');
+  }, [updateSearchQuery]);
+
+  useEffect(() => {
+    const target = loadMoreRef.current;
+    if (
+      !target ||
+      !walletsQuery.hasNextPage ||
+      walletsQuery.isFetchingNextPage
+    ) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          void walletsQuery.fetchNextPage();
+        }
+      },
+      { rootMargin: '160px' }
+    );
+
+    observer.observe(target);
+
+    return () => observer.disconnect();
+  }, [
+    walletsQuery.fetchNextPage,
+    walletsQuery.hasNextPage,
+    walletsQuery.isFetchingNextPage,
+  ]);
 
   return (
     <div className="relative">
       <DataTable
         t={t}
-        data={data}
+        data={walletsQuery.isLoading ? undefined : wallets}
         columnGenerator={walletColumns}
         extraData={{
+          balanceMode,
           canUpdateWallets,
           canDeleteWallets,
           currency,
           exchangeRates: exchangeRatesResponse?.data,
           isPersonalWorkspace,
         }}
-        filters={filters}
         namespace="wallet-data-table"
-        count={count}
+        defaultQuery={normalizedQuery}
         defaultVisibility={{
           id: false,
           description: false,
@@ -107,12 +164,58 @@ export function WalletsDataTable({
           report_opt_in: false,
           created_at: false,
         }}
+        hidePagination
+        isFiltered={normalizedQuery.length > 0}
+        onRefresh={() => void walletsQuery.refetch()}
         onRowClick={canUpdateWallets ? handleRowClick : undefined}
-        pageIndex={pageIndex}
-        pageSize={pageSizeValue}
-        setParams={handleSetParams}
+        onSearch={updateSearchQuery}
+        resetParams={resetSearchQuery}
       />
 
+      {!walletsQuery.isLoading && walletsQuery.isError && (
+        <div className="rounded-lg border border-dynamic-red/30 bg-dynamic-red/5 p-4 text-dynamic-red text-sm">
+          {walletsQuery.error instanceof Error
+            ? walletsQuery.error.message
+            : t('wallet-data-table.load_error')}
+        </div>
+      )}
+
+      {!walletsQuery.isLoading && !walletsQuery.isError && (
+        <div
+          ref={loadMoreRef}
+          className="mt-4 flex flex-col items-center gap-3"
+        >
+          <div className="text-muted-foreground text-sm">
+            {t('wallet-data-table.loaded_count', {
+              loaded: wallets.length,
+              total: totalCount,
+            })}
+          </div>
+          {walletsQuery.isFetchingNextPage && (
+            <div className="flex items-center gap-2 text-muted-foreground text-sm">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              {t('wallet-data-table.loading_more')}
+            </div>
+          )}
+          {walletsQuery.hasNextPage && !walletsQuery.isFetchingNextPage && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => void walletsQuery.fetchNextPage()}
+            >
+              <ChevronDown className="mr-2 h-4 w-4" />
+              {t('wallet-data-table.load_more')}
+            </Button>
+          )}
+          {!walletsQuery.hasNextPage && wallets.length > WALLET_PAGE_SIZE && (
+            <div className="rounded-lg border border-dashed bg-muted/20 px-4 py-2 text-muted-foreground text-sm">
+              {t('wallet-data-table.end_of_list')}
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Edit Dialog */}
       {selectedWallet && (
         <ModifiableDialogTrigger

package/src/components/ui/finance/wallets/wallets-page.test.tsx

@@ -1,24 +1,20 @@
+import { render } from '@testing-library/react';
+import type { ReactElement } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 const mocks = vi.hoisted(() => ({
+  createDialogFeatureSummary: vi.fn((_props: unknown) => null),
   getPermissions: vi.fn(),
   getTranslations: vi.fn(),
   getWorkspace: vi.fn(),
   getWorkspaceConfig: vi.fn(),
-  headers: vi.fn(),
-  listWallets: vi.fn(),
   notFound: vi.fn(() => {
     throw new Error('notFound');
   }),
-  withForwardedInternalApiAuth: vi.fn(() => ({ headers: {} })),
-}));
-
-vi.mock('@tuturuuu/internal-api', () => ({
-  listWallets: (...args: Parameters<typeof mocks.listWallets>) =>
-    mocks.listWallets(...args),
-  withForwardedInternalApiAuth: (
-    ...args: Parameters<typeof mocks.withForwardedInternalApiAuth>
-  ) => mocks.withForwardedInternalApiAuth(...args),
+  walletCheckpointHistoryDialog: vi.fn((_props: unknown) => null),
+  walletForm: vi.fn((_props: unknown) => null),
+  walletTotalCheckDialog: vi.fn((_props: unknown) => null),
+  walletsDataTable: vi.fn((_props: unknown) => null),
 }));
 
 vi.mock('@tuturuuu/utils/workspace-helper', () => ({
@@ -30,11 +26,6 @@ vi.mock('@tuturuuu/utils/workspace-helper', () => ({
     mocks.getWorkspaceConfig(...args),
 }));
 
-vi.mock('next/headers', () => ({
-  headers: (...args: Parameters<typeof mocks.headers>) =>
-    mocks.headers(...args),
-}));
-
 vi.mock('next/navigation', () => ({
   notFound: (...args: Parameters<typeof mocks.notFound>) =>
     mocks.notFound(...args),
@@ -50,15 +41,45 @@ vi.mock('@tuturuuu/ui/custom/feature-summary', () => ({
 }));
 
 vi.mock('@tuturuuu/ui/finance/shared/create-dialog-feature-summary', () => ({
-  CreateDialogFeatureSummary: () => null,
+  CreateDialogFeatureSummary: (
+    ...args: Parameters<typeof mocks.createDialogFeatureSummary>
+  ) => mocks.createDialogFeatureSummary(...args),
+}));
+
+vi.mock('@tuturuuu/ui/finance/shared/balance-mode-toggle', () => ({
+  FinanceBalanceModeToggle: () => null,
 }));
 
+vi.mock('@tuturuuu/ui/finance/shared/numbers-visibility-toggle', () => ({
+  FinanceNumbersVisibilityToggle: () => null,
+}));
+
+vi.mock(
+  '@tuturuuu/ui/finance/wallets/checkpoints/wallet-checkpoint-history-dialog',
+  () => ({
+    WalletCheckpointHistoryDialog: (
+      ...args: Parameters<typeof mocks.walletCheckpointHistoryDialog>
+    ) => mocks.walletCheckpointHistoryDialog(...args),
+  })
+);
+
+vi.mock(
+  '@tuturuuu/ui/finance/wallets/checkpoints/wallet-total-check-dialog',
+  () => ({
+    WalletTotalCheckDialog: (
+      ...args: Parameters<typeof mocks.walletTotalCheckDialog>
+    ) => mocks.walletTotalCheckDialog(...args),
+  })
+);
+
 vi.mock('@tuturuuu/ui/finance/wallets/form', () => ({
-  WalletForm: () => null,
+  WalletForm: (...args: Parameters<typeof mocks.walletForm>) =>
+    mocks.walletForm(...args),
 }));
 
 vi.mock('@tuturuuu/ui/finance/wallets/wallets-data-table', () => ({
-  WalletsDataTable: () => null,
+  WalletsDataTable: (...args: Parameters<typeof mocks.walletsDataTable>) =>
+    mocks.walletsDataTable(...args),
 }));
 
 vi.mock('@tuturuuu/ui/separator', () => ({
@@ -72,36 +93,96 @@ describe('wallets page', () => {
     mocks.getTranslations.mockResolvedValue((key: string) => key);
     mocks.getPermissions.mockResolvedValue({
       containsPermission: vi.fn((permission: string) =>
-        ['create_wallets', 'update_wallets', 'delete_wallets'].includes(
-          permission
-        )
+        [
+          'create_transactions',
+          'create_wallets',
+          'update_wallets',
+          'delete_wallets',
+        ].includes(permission)
       ),
     });
     mocks.getWorkspaceConfig.mockResolvedValue('USD');
     mocks.getWorkspace.mockResolvedValue({ personal: false });
-    mocks.headers.mockResolvedValue(new Headers());
-    mocks.listWallets.mockResolvedValue([
-      { id: 'wallet-1', name: 'Primary Wallet' },
-    ]);
   });
 
-  it('loads wallets through the internal API helper', async () => {
+  it('passes wallet controls and the search query to the infinite table', async () => {
     const { default: WalletsPageModule } = await import('./wallets-page.js');
     const WalletsPage = WalletsPageModule as unknown as (props: {
       wsId: string;
-      searchParams: { q: string; page: string; pageSize: string };
-      page?: string;
-      pageSize?: string;
+      searchParams: { q: string };
     }) => Promise<unknown>;
 
-    await WalletsPage({
+    const element = await WalletsPage({
       wsId: 'ws-1',
-      searchParams: { q: '', page: '1', pageSize: '10' },
-      page: '1',
-      pageSize: '10',
+      searchParams: { q: 'bank' },
     });
 
-    expect(mocks.withForwardedInternalApiAuth).toHaveBeenCalled();
-    expect(mocks.listWallets).toHaveBeenCalledWith('ws-1', { headers: {} });
+    render(element as ReactElement);
+
+    expect(mocks.walletsDataTable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        canDeleteWallets: true,
+        canUpdateWallets: true,
+        currency: 'USD',
+        financePrefix: '/finance',
+        isPersonalWorkspace: false,
+        query: 'bank',
+        wsId: 'ws-1',
+      }),
+      undefined
+    );
+    expect(mocks.walletTotalCheckDialog).toHaveBeenCalledWith(
+      expect.objectContaining({
+        canUpdateWallets: true,
+        currency: 'USD',
+        wsId: 'ws-1',
+      }),
+      undefined
+    );
+    expect(mocks.walletCheckpointHistoryDialog).toHaveBeenCalledWith(
+      expect.objectContaining({
+        canCreateTransactions: true,
+        financePrefix: '/finance',
+        wsId: 'ws-1',
+      }),
+      undefined
+    );
+  });
+
+  it('opens wallet creation in credit-card mode from search params', async () => {
+    const { default: WalletsPageModule } = await import('./wallets-page.js');
+    const WalletsPage = WalletsPageModule as unknown as (props: {
+      wsId: string;
+      searchParams: {
+        create?: string;
+        q: string;
+      };
+    }) => Promise<ReactElement>;
+
+    const element = await WalletsPage({
+      wsId: 'ws-1',
+      searchParams: {
+        create: 'credit-card',
+        q: '',
+      },
+    });
+
+    render(element);
+
+    const createDialogProps =
+      mocks.createDialogFeatureSummary.mock.calls[0]?.[0];
+
+    expect(createDialogProps).toEqual(
+      expect.objectContaining({
+        defaultOpen: true,
+      })
+    );
+    const form = (createDialogProps as { form?: ReactElement }).form;
+
+    expect(form?.props).toEqual(
+      expect.objectContaining({
+        defaultType: 'CREDIT',
+      })
+    );
   });
 });