@tuturuuu/ui 0.5.0 → 0.6.0

package/src/components/ui/finance/wallets/walletId/wallet-details-amount.tsx

@@ -1,34 +1,254 @@
 'use client';
 
+import {
+  BookOpen,
+  Scale,
+  TrendingDown,
+  TrendingUp,
+  TriangleAlert,
+} from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import type { ExchangeRate } from '@tuturuuu/utils/exchange-rates';
+import { convertCurrency } from '@tuturuuu/utils/exchange-rates';
+import { cn, formatCurrency, getCurrencyLocale } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+import { useFinanceBalanceMode } from '../../shared/use-finance-balance-mode';
 import {
   FINANCE_HIDDEN_AMOUNT,
   useFinanceConfidentialVisibility,
 } from '../../shared/use-finance-confidential-visibility';
+import {
+  getWalletBalanceTone,
+  resolveWalletBalanceForMode,
+} from '../../shared/wallet-balance-mode';
 
 interface WalletDetailsAmountProps {
+  auditedBalance?: number | null;
+  auditStatus?: 'clean' | 'no_checkpoint' | 'unresolved' | null;
+  auditVariance?: number | null;
+  currency?: string;
   primary: string;
   converted?: string | null;
+  exchangeRates?: ExchangeRate[];
+  ledgerBalance?: number | null;
+  workspaceCurrency?: string | null;
+}
+
+type AmountBadgeTone = ReturnType<typeof getWalletBalanceTone> | 'varied';
+
+function getAmountBadgeClassName(tone: AmountBadgeTone) {
+  if (tone === 'varied') {
+    return 'border-dynamic-orange/40 bg-dynamic-orange/10 font-semibold text-dynamic-orange';
+  }
+
+  if (tone === 'positive') {
+    return 'border-dynamic-green/30 bg-dynamic-green/10 font-semibold text-dynamic-green';
+  }
+
+  if (tone === 'negative') {
+    return 'border-dynamic-red/30 bg-dynamic-red/10 font-semibold text-dynamic-red';
+  }
+
+  return 'font-semibold text-muted-foreground';
+}
+
+function getContextAmountBadgeClassName(tone: 'ledger' | 'variance') {
+  if (tone === 'ledger') {
+    return 'border-dynamic-blue/30 bg-dynamic-blue/10 font-semibold text-dynamic-blue';
+  }
+
+  return 'border-dynamic-purple/30 bg-dynamic-purple/10 font-semibold text-dynamic-purple';
+}
+
+function AmountBadge({
+  children,
+  icon,
+  tone,
+}: {
+  children: ReactNode;
+  icon?: ReactNode;
+  tone: AmountBadgeTone;
+}) {
+  return (
+    <Badge
+      variant="outline"
+      data-wallet-details-balance-badge={tone}
+      className={cn(
+        'flex w-fit items-center gap-1 whitespace-nowrap px-2 py-1 text-sm',
+        getAmountBadgeClassName(tone)
+      )}
+    >
+      {icon}
+      <span>{children}</span>
+    </Badge>
+  );
+}
+
+function ContextAmountBadge({
+  children,
+  icon,
+  label,
+  tone,
+}: {
+  children: ReactNode;
+  icon?: ReactNode;
+  label: string;
+  tone: 'ledger' | 'variance';
+}) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'flex w-fit items-center gap-1 whitespace-nowrap',
+        getContextAmountBadgeClassName(tone)
+      )}
+    >
+      {icon}
+      <span className="font-medium opacity-75">{label}</span>
+      <span>{children}</span>
+    </Badge>
+  );
 }
 
 export function WalletDetailsAmount({
+  auditedBalance,
+  auditStatus,
+  auditVariance,
+  currency,
   primary,
   converted,
+  exchangeRates,
+  ledgerBalance,
+  workspaceCurrency,
 }: WalletDetailsAmountProps) {
+  const t = useTranslations('wallet-checkpoints');
   const { isConfidential: areNumbersHidden } =
     useFinanceConfidentialVisibility();
+  const { mode } = useFinanceBalanceMode();
 
   if (areNumbersHidden) {
     return (
-      <span className="text-muted-foreground">{FINANCE_HIDDEN_AMOUNT}</span>
+      <Badge variant="outline" className="font-semibold text-muted-foreground">
+        {FINANCE_HIDDEN_AMOUNT}
+      </Badge>
     );
   }
 
+  const {
+    auditStatus: resolvedAuditStatus,
+    auditVariance: resolvedAuditVariance,
+    contextBalance,
+    displayBalance,
+    hasAuditedBalance,
+    isAuditedMode,
+  } = resolveWalletBalanceForMode(
+    {
+      audit_balance: auditedBalance,
+      audit_status: auditStatus ?? undefined,
+      audit_variance: auditVariance,
+      balance: ledgerBalance,
+    },
+    mode
+  );
+  const hasResolvableBalance =
+    typeof ledgerBalance === 'number' || typeof auditedBalance === 'number';
+  const resolvedCurrency = currency ?? 'USD';
+  const resolvedWorkspaceCurrency = workspaceCurrency ?? resolvedCurrency;
+  const displayPrimary = hasResolvableBalance
+    ? Intl.NumberFormat(getCurrencyLocale(resolvedCurrency), {
+        style: 'currency',
+        currency: resolvedCurrency,
+      }).format(displayBalance)
+    : primary;
+  let displayConverted = converted;
+
+  if (
+    typeof displayBalance === 'number' &&
+    resolvedCurrency !== resolvedWorkspaceCurrency &&
+    exchangeRates &&
+    exchangeRates.length > 0 &&
+    displayBalance !== 0
+  ) {
+    const convertedBalance = convertCurrency(
+      displayBalance,
+      resolvedCurrency,
+      resolvedWorkspaceCurrency,
+      exchangeRates
+    );
+
+    if (convertedBalance !== null) {
+      displayConverted = formatCurrency(
+        Math.abs(convertedBalance),
+        resolvedWorkspaceCurrency,
+        undefined,
+        { signDisplay: 'never', maximumFractionDigits: 0 }
+      );
+    }
+  }
+
+  const showAuditContext =
+    hasAuditedBalance &&
+    resolvedAuditStatus &&
+    resolvedAuditStatus !== 'clean' &&
+    resolvedAuditStatus !== 'no_checkpoint' &&
+    resolvedAuditVariance !== null &&
+    resolvedAuditVariance !== 0;
+  const displayTone = showAuditContext
+    ? 'varied'
+    : getWalletBalanceTone(displayBalance);
+
   return (
-    <span>
-      {primary}
-      {converted && (
-        <span className="ml-2 text-muted-foreground text-sm">
-          {'\u2248'} {converted}
+    <span className="inline-flex flex-col items-start gap-1 align-middle">
+      <span className="flex flex-wrap items-center gap-1.5">
+        <AmountBadge
+          tone={displayTone}
+          icon={
+            displayTone === 'positive' ? (
+              <TrendingUp className="h-3.5 w-3.5" />
+            ) : displayTone === 'negative' ? (
+              <TrendingDown className="h-3.5 w-3.5" />
+            ) : displayTone === 'varied' ? (
+              <TriangleAlert className="h-3.5 w-3.5" />
+            ) : undefined
+          }
+        >
+          {displayPrimary}
+        </AmountBadge>
+        {displayConverted && (
+          <span className="rounded-md border bg-muted/40 px-2 py-0.5 text-muted-foreground text-xs">
+            {'\u2248'} {displayConverted}
+          </span>
+        )}
+      </span>
+      {showAuditContext && typeof contextBalance === 'number' && (
+        <span className="flex flex-wrap items-center gap-1.5">
+          <ContextAmountBadge
+            tone="ledger"
+            icon={<BookOpen className="h-3 w-3" />}
+            label={isAuditedMode ? t('ledger') : t('audited')}
+          >
+            {formatCurrency(contextBalance, resolvedCurrency, undefined, {
+              signDisplay: 'auto',
+            })}
+          </ContextAmountBadge>
+          <ContextAmountBadge
+            tone="variance"
+            icon={<Scale className="h-3 w-3" />}
+            label={t('variance')}
+          >
+            {formatCurrency(
+              resolvedAuditVariance ?? 0,
+              resolvedCurrency,
+              undefined,
+              { signDisplay: 'always' }
+            )}
+          </ContextAmountBadge>
+        </span>
+      )}
+      {isAuditedMode && resolvedAuditStatus === 'no_checkpoint' && (
+        <span className="text-muted-foreground text-xs">
+          {t('no_checkpoint_short')}
         </span>
       )}
     </span>

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

@@ -1,3 +1,5 @@
+import { render } from '@testing-library/react';
+import type { ReactElement } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 const mocks = vi.hoisted(() => {
@@ -31,6 +33,8 @@ const mocks = vi.hoisted(() => {
     notFound: vi.fn(() => {
       throw new Error('notFound');
     }),
+    creditWalletSummary: vi.fn((_props: unknown) => null),
+    walletDetailsActions: vi.fn((_props: unknown) => null),
     withForwardedInternalApiAuth: vi.fn(() => ({ headers: {} })),
   };
 });
@@ -101,7 +105,9 @@ vi.mock('../checkpoints/wallet-checkpoint-panel', () => ({
 }));
 
 vi.mock('./credit-wallet-summary', () => ({
-  CreditWalletSummary: () => null,
+  CreditWalletSummary: (
+    ...args: Parameters<typeof mocks.creditWalletSummary>
+  ) => mocks.creditWalletSummary(...args),
 }));
 
 vi.mock('./interest', () => ({
@@ -109,7 +115,9 @@ vi.mock('./interest', () => ({
 }));
 
 vi.mock('./wallet-details-actions', () => ({
-  WalletDetailsActions: () => null,
+  WalletDetailsActions: (
+    ...args: Parameters<typeof mocks.walletDetailsActions>
+  ) => mocks.walletDetailsActions(...args),
 }));
 
 vi.mock('./wallet-role-access-dialog', () => ({
@@ -162,4 +170,58 @@ describe('wallet details page', () => {
       headers: {},
     });
   });
+
+  it('forwards credit wallet actions to the shared actions component', async () => {
+    mocks.getWallet.mockResolvedValue({
+      id: 'wallet-1',
+      name: 'Rewards Card',
+      type: 'CREDIT',
+      currency: 'USD',
+      balance: -120,
+    });
+
+    const { default: WalletDetailsPageModule } = await import(
+      './wallet-details-page.js'
+    );
+    const WalletDetailsPage = WalletDetailsPageModule as unknown as (props: {
+      wsId: string;
+      walletId: string;
+      searchParams: {
+        action?: string;
+        q: string;
+        page: string;
+        pageSize: string;
+      };
+    }) => Promise<ReactElement>;
+
+    const element = await WalletDetailsPage({
+      wsId: 'ws-1',
+      walletId: 'wallet-1',
+      searchParams: { action: 'payment', q: '', page: '1', pageSize: '10' },
+    });
+
+    render(element);
+
+    expect(mocks.walletDetailsActions).toHaveBeenCalled();
+    const actionProps = mocks.walletDetailsActions.mock.calls[0]?.[0];
+
+    expect(actionProps).toEqual(
+      expect.objectContaining({
+        initialAction: 'payment',
+        walletId: 'wallet-1',
+      })
+    );
+    expect(mocks.creditWalletSummary).toHaveBeenCalled();
+    const summaryProps = mocks.creditWalletSummary.mock.calls[0]?.[0];
+
+    expect(summaryProps).toEqual(
+      expect.objectContaining({
+        wsId: 'ws-1',
+        wallet: expect.objectContaining({
+          id: 'wallet-1',
+          type: 'CREDIT',
+        }),
+      })
+    );
+  });
 });

package/src/components/ui/finance/wallets/walletId/wallet-details-page.tsx

@@ -12,8 +12,7 @@ import { InfiniteTransactionsList } from '@tuturuuu/ui/finance/transactions/infi
 import { Separator } from '@tuturuuu/ui/separator';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
 import type { ExchangeRate } from '@tuturuuu/utils/exchange-rates';
-import { convertCurrency } from '@tuturuuu/utils/exchange-rates';
-import { formatCurrency, getCurrencyLocale } from '@tuturuuu/utils/format';
+import { getCurrencyLocale } from '@tuturuuu/utils/format';
 import {
   getPermissions,
   getWorkspace,
@@ -31,7 +30,10 @@ import { WalletCheckpointPanel } from '../checkpoints/wallet-checkpoint-panel';
 import { WalletIconDisplay } from '../wallet-icon-display';
 import { CreditWalletSummary } from './credit-wallet-summary';
 import { WalletInterestSection } from './interest';
-import { WalletDetailsActions } from './wallet-details-actions';
+import {
+  type WalletDetailsAction,
+  WalletDetailsActions,
+} from './wallet-details-actions';
 import { WalletDetailsAmount } from './wallet-details-amount';
 import WalletRoleAccessDialog from './wallet-role-access-dialog';
 
@@ -39,6 +41,7 @@ interface Props {
   wsId: string;
   walletId: string;
   searchParams: {
+    action?: string;
     q: string;
     page: string;
     pageSize: string;
@@ -55,6 +58,7 @@ interface Props {
 export default async function WalletDetailsPage({
   wsId,
   walletId,
+  searchParams,
   defaultCurrency,
   internalApiOptions,
   permissions,
@@ -114,31 +118,10 @@ export default async function WalletDetailsPage({
 
   const currency = wallet.currency || resolvedDefaultCurrency || 'USD';
   const workspaceCurrency = resolvedDefaultCurrency || 'USD';
+  const initialAction = getInitialWalletAction(searchParams.action);
 
   // Fetch exchange rates for conversion display
   const exchangeRates = await getExchangeRates();
-  let convertedBalanceText: string | null = null;
-  if (
-    currency !== workspaceCurrency &&
-    exchangeRates.length > 0 &&
-    wallet.balance &&
-    wallet.balance !== 0
-  ) {
-    const converted = convertCurrency(
-      wallet.balance,
-      currency,
-      workspaceCurrency,
-      exchangeRates
-    );
-    if (converted !== null) {
-      convertedBalanceText = formatCurrency(
-        Math.abs(converted),
-        workspaceCurrency,
-        undefined,
-        { signDisplay: 'never', maximumFractionDigits: 0 }
-      );
-    }
-  }
 
   return (
     <div className="flex min-h-full w-full flex-col">
@@ -161,6 +144,7 @@ export default async function WalletDetailsPage({
           wsId={wsId}
           walletId={walletId}
           wallet={wallet as Wallet}
+          initialAction={initialAction}
           canUpdateWallets={canUpdateWallets}
           canCreateTransactions={canCreateTransactions}
           canCreateConfidentialTransactions={canCreateConfidentialTransactions}
@@ -172,6 +156,12 @@ export default async function WalletDetailsPage({
         />
       </div>
       <Separator className="my-4" />
+      {wallet.type === 'CREDIT' && (
+        <>
+          <CreditWalletSummary wsId={wsId} wallet={wallet as Wallet} />
+          <Separator className="my-4" />
+        </>
+      )}
       <div className="grid h-fit gap-4 md:grid-cols-2">
         <Card className="grid gap-4">
           <div className="grid h-fit gap-2 rounded-lg p-4">
@@ -195,11 +185,17 @@ export default async function WalletDetailsPage({
               label={t('wallet-data-table.balance')}
               value={
                 <WalletDetailsAmount
+                  auditedBalance={wallet.audit_balance}
+                  auditStatus={wallet.audit_status}
+                  auditVariance={wallet.audit_variance}
+                  currency={currency}
+                  exchangeRates={exchangeRates}
+                  ledgerBalance={wallet.balance ?? 0}
                   primary={Intl.NumberFormat(getCurrencyLocale(currency), {
                     style: 'currency',
                     currency,
                   }).format(wallet.balance || 0)}
-                  converted={convertedBalanceText}
+                  workspaceCurrency={workspaceCurrency}
                 />
               }
             />
@@ -294,12 +290,6 @@ export default async function WalletDetailsPage({
           <Separator className="my-4" />
         </>
       )}
-      {wallet.type === 'CREDIT' && (
-        <>
-          <CreditWalletSummary wsId={wsId} wallet={wallet as Wallet} />
-          <Separator className="my-4" />
-        </>
-      )}
       <WalletCheckpointPanel
         wsId={wsId}
         walletId={walletId}
@@ -341,6 +331,18 @@ export default async function WalletDetailsPage({
   );
 }
 
+function getInitialWalletAction(action?: string): WalletDetailsAction | null {
+  switch (action) {
+    case 'charge':
+    case 'payment':
+    case 'credit':
+    case 'edit':
+      return action;
+    default:
+      return null;
+  }
+}
+
 function DetailItem({
   icon,
   label,
@@ -352,9 +354,14 @@ function DetailItem({
 }) {
   if (!value) return undefined;
   return (
-    <div className="flex items-center gap-1">
-      {icon}
-      <span className="font-semibold">{label}:</span> {value}
+    <div className="flex min-w-0 items-start gap-3 rounded-md py-1.5">
+      <span className="mt-0.5 flex shrink-0 text-muted-foreground [&_svg]:h-5 [&_svg]:w-5">
+        {icon}
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="text-muted-foreground text-xs">{label}</div>
+        <div className="min-w-0 font-medium">{value}</div>
+      </div>
     </div>
   );
 }

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');
+  });
+});