@tuturuuu/ui 0.5.0 → 0.6.0

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,22 +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: () => null,
+    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', () => ({
@@ -79,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',
+      })
+    );
   });
 });

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

@@ -1,10 +1,7 @@
-import {
-  type InternalApiClientOptions,
-  listWallets,
-  withForwardedInternalApiAuth,
-} from '@tuturuuu/internal-api';
-import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import { FinanceBalanceModeToggle } from '@tuturuuu/ui/finance/shared/balance-mode-toggle';
 import { CreateDialogFeatureSummary } from '@tuturuuu/ui/finance/shared/create-dialog-feature-summary';
+import { FinanceNumbersVisibilityToggle } from '@tuturuuu/ui/finance/shared/numbers-visibility-toggle';
+import { WalletCheckpointHistoryDialog } from '@tuturuuu/ui/finance/wallets/checkpoints/wallet-checkpoint-history-dialog';
 import { WalletTotalCheckDialog } from '@tuturuuu/ui/finance/wallets/checkpoints/wallet-total-check-dialog';
 import { WalletForm } from '@tuturuuu/ui/finance/wallets/form';
 import { WalletsDataTable } from '@tuturuuu/ui/finance/wallets/wallets-data-table';
@@ -15,7 +12,6 @@ import {
   getWorkspaceConfig,
   type PermissionsResult,
 } from '@tuturuuu/utils/workspace-helper';
-import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
@@ -23,15 +19,10 @@ interface Props {
   wsId: string;
   searchParams: {
     create?: string;
-    q: string;
-    page: string;
-    pageSize: string;
+    q?: string;
   };
-  page?: string;
-  pageSize?: string;
   currency?: string;
   financePrefix?: string;
-  internalApiOptions?: InternalApiClientOptions;
   openCreateDialog?: boolean;
   permissions?: PermissionsResult;
   workspace?: {
@@ -42,11 +33,8 @@ interface Props {
 export default async function WalletsPage({
   wsId,
   searchParams,
-  page,
-  pageSize,
   currency,
   financePrefix = '/finance',
-  internalApiOptions,
   openCreateDialog = false,
   permissions,
   workspace,
@@ -66,19 +54,8 @@ export default async function WalletsPage({
   const canCreateWallets = containsPermission('create_wallets');
   const canUpdateWallets = containsPermission('update_wallets');
   const canDeleteWallets = containsPermission('delete_wallets');
-  const resolvedInternalApiOptions =
-    internalApiOptions ?? withForwardedInternalApiAuth(await headers());
-  const {
-    data: rawData,
-    count,
-    allWallets,
-  } = await getData(wsId, searchParams, resolvedInternalApiOptions);
-
-  const data = rawData.map((d) => ({
-    ...d,
-    href: `/${wsId}${financePrefix}/wallets/${d.id}`,
-    ws_id: wsId,
-  }));
+  const canCreateTransactions = containsPermission('create_transactions');
+  const isCreditCardCreate = searchParams.create === 'credit-card';
 
   return (
     <>
@@ -88,65 +65,48 @@ export default async function WalletsPage({
         description={t('ws-wallets.description')}
         createTitle={t('ws-wallets.create')}
         createDescription={t('ws-wallets.create_description')}
-        defaultOpen={openCreateDialog || searchParams.create === 'wallet'}
-        form={canCreateWallets ? <WalletForm wsId={wsId} /> : undefined}
+        defaultOpen={
+          openCreateDialog ||
+          searchParams.create === 'wallet' ||
+          isCreditCardCreate
+        }
+        form={
+          canCreateWallets ? (
+            <WalletForm
+              wsId={wsId}
+              defaultType={isCreditCardCreate ? 'CREDIT' : 'STANDARD'}
+            />
+          ) : undefined
+        }
       />
       <Separator className="my-4" />
-      <div className="mb-4 flex justify-end">
-        <WalletTotalCheckDialog
-          wsId={wsId}
-          wallets={allWallets
-            .filter((wallet) => !!wallet.id)
-            .map((wallet) => ({
-              balance: wallet.balance,
-              currency: wallet.currency || resolvedCurrency || 'USD',
-              id: wallet.id as string,
-              name: wallet.name,
-            }))}
-          canUpdateWallets={canUpdateWallets}
-        />
+      <div className="mb-4 flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-wrap gap-2">
+          <FinanceBalanceModeToggle />
+          <FinanceNumbersVisibilityToggle />
+        </div>
+        <div className="flex flex-wrap gap-2 lg:justify-end">
+          <WalletCheckpointHistoryDialog
+            wsId={wsId}
+            financePrefix={financePrefix}
+            canCreateTransactions={canCreateTransactions}
+          />
+          <WalletTotalCheckDialog
+            wsId={wsId}
+            currency={resolvedCurrency ?? 'USD'}
+            canUpdateWallets={canUpdateWallets}
+          />
+        </div>
       </div>
       <WalletsDataTable
         wsId={wsId}
-        data={data}
-        count={count}
         canUpdateWallets={canUpdateWallets}
         canDeleteWallets={canDeleteWallets}
         currency={resolvedCurrency ?? 'USD'}
+        financePrefix={financePrefix}
         isPersonalWorkspace={!!resolvedWorkspace?.personal}
-        page={page}
-        pageSize={pageSize}
+        query={searchParams.q}
       />
     </>
   );
 }
-
-async function getData(
-  wsId: string,
-  {
-    q,
-    page = '1',
-    pageSize = '10',
-  }: { q?: string; page?: string; pageSize?: string },
-  internalApiOptions: Parameters<typeof listWallets>[1]
-) {
-  const wallets = await listWallets(wsId, internalApiOptions);
-  const normalizedQuery = q?.trim().toLowerCase();
-  const filteredWallets = wallets
-    .filter((wallet) =>
-      normalizedQuery
-        ? wallet.name?.toLowerCase().includes(normalizedQuery)
-        : true
-    )
-    .sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-
-  const parsedPage = parseInt(page, 10);
-  const parsedPageSize = parseInt(pageSize, 10);
-  const start = (parsedPage - 1) * parsedPageSize;
-
-  return {
-    data: filteredWallets.slice(start, start + parsedPageSize) as Wallet[],
-    allWallets: wallets as Wallet[],
-    count: filteredWallets.length,
-  };
-}

package/src/components/ui/storefront/accent-button.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+
+export function AccentButton({
+  children,
+  disabled,
+  onClick,
+  radius,
+}: {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+  radius: string;
+}) {
+  return (
+    <button
+      className={cn(
+        'inline-flex h-9 items-center justify-center gap-2 px-3 font-medium text-sm transition disabled:pointer-events-none disabled:opacity-50',
+        'bg-primary text-primary-foreground hover:bg-primary/90',
+        '[--accent-bg:var(--storefront-accent,var(--primary))] [--accent-fg:var(--storefront-accent-foreground,var(--primary-foreground))]',
+        'bg-[var(--accent-bg)] text-[var(--accent-fg)] hover:opacity-90',
+        radius
+      )}
+      disabled={disabled}
+      onClick={onClick}
+      type={onClick ? 'button' : 'submit'}
+    >
+      {children}
+    </button>
+  );
+}