@tuturuuu/ui 0.5.0 → 0.6.0

package/src/components/ui/finance/wallets/checkpoints/wallet-total-check-dialog.tsx

@@ -1,11 +1,19 @@
 'use client';
 
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Calculator } from '@tuturuuu/icons';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  Calculator,
+  Loader2,
+  TrendingDown,
+  TrendingUp,
+  Wallet as WalletIcon,
+} from '@tuturuuu/icons';
 import {
   createWalletCheckpointBatch,
+  listWallets,
   type WalletCheckpointBatchPayload,
 } from '@tuturuuu/internal-api/finance';
+import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import {
   Dialog,
@@ -18,12 +26,22 @@ import {
 import { Input } from '@tuturuuu/ui/input';
 import { Label } from '@tuturuuu/ui/label';
 import { toast } from '@tuturuuu/ui/sonner';
+import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
+import { useFinanceBalanceMode } from '../../shared/use-finance-balance-mode';
+import {
+  getWalletBalanceTone,
+  resolveWalletBalanceForMode,
+} from '../../shared/wallet-balance-mode';
 import { invalidateWalletMutationQueries } from '../query-invalidation';
 import { WalletCheckpointAmount } from './wallet-checkpoint-amount';
 
 type WalletInput = {
+  audit_balance?: number | null;
+  audit_status?: 'clean' | 'no_checkpoint' | 'unresolved' | null;
+  audit_variance?: number | null;
   balance?: number | null;
   currency: string;
   id: string;
@@ -32,17 +50,42 @@ type WalletInput = {
 
 export function WalletTotalCheckDialog({
   canUpdateWallets,
-  wallets,
+  currency,
   wsId,
 }: {
   canUpdateWallets: boolean;
-  wallets: WalletInput[];
+  currency: string;
   wsId: string;
 }) {
   const t = useTranslations('wallet-checkpoints');
   const queryClient = useQueryClient();
+  const { isAuditedMode } = useFinanceBalanceMode();
   const [open, setOpen] = useState(false);
   const [values, setValues] = useState<Record<string, string>>({});
+  const walletsQuery = useQuery({
+    enabled: open && canUpdateWallets,
+    queryFn: () => listWallets(wsId),
+    queryKey: ['wallets', wsId, 'all-wallet-check'],
+  });
+  const wallets = useMemo<WalletInput[]>(
+    () =>
+      (walletsQuery.data ?? []).flatMap((wallet) => {
+        if (!wallet.id) return [];
+
+        return [
+          {
+            audit_balance: wallet.audit_balance,
+            audit_status: wallet.audit_status,
+            audit_variance: wallet.audit_variance,
+            balance: wallet.balance,
+            currency: wallet.currency || currency,
+            id: wallet.id,
+            name: wallet.name,
+          },
+        ];
+      }),
+    [currency, walletsQuery.data]
+  );
   const mutation = useMutation({
     mutationFn: (payload: WalletCheckpointBatchPayload) =>
       createWalletCheckpointBatch(wsId, payload),
@@ -70,6 +113,7 @@ export function WalletTotalCheckDialog({
     return [...grouped.entries()].sort(([a], [b]) => a.localeCompare(b));
   }, [values, wallets]);
   const canSubmit =
+    !walletsQuery.isLoading &&
     wallets.length > 0 &&
     wallets.every((wallet) => Number.isFinite(Number(values[wallet.id])));
 
@@ -91,54 +135,37 @@ export function WalletTotalCheckDialog({
               {t('all_wallet_check_description')}
             </DialogDescription>
           </DialogHeader>
-          {wallets.length === 0 ? (
+          {walletsQuery.isLoading ? (
+            <div className="flex items-center gap-2 rounded-md border border-dashed p-4 text-muted-foreground text-sm">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              {t('loading_wallets')}
+            </div>
+          ) : walletsQuery.isError ? (
+            <div className="rounded-md border border-dynamic-red/30 bg-dynamic-red/5 p-4 text-dynamic-red text-sm">
+              {walletsQuery.error instanceof Error
+                ? walletsQuery.error.message
+                : t('wallets_load_error')}
+            </div>
+          ) : wallets.length === 0 ? (
             <div className="rounded-md border border-dashed p-4 text-muted-foreground text-sm">
               {t('no_wallets')}
             </div>
           ) : (
             <div className="grid gap-3">
               {wallets.map((wallet) => (
-                <div
+                <WalletTotalCheckRow
                   key={wallet.id}
-                  className="grid gap-2 rounded-md border p-3"
-                >
-                  <div className="flex items-center justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="truncate font-medium text-sm">
-                        {wallet.name}
-                      </div>
-                      <div className="text-muted-foreground text-xs">
-                        {t('ledger_balance')}:{' '}
-                        <WalletCheckpointAmount
-                          amount={wallet.balance ?? 0}
-                          currency={wallet.currency}
-                        />
-                      </div>
-                    </div>
-                    <div className="text-muted-foreground text-xs">
-                      {wallet.currency}
-                    </div>
-                  </div>
-                  <div className="grid gap-2">
-                    <Label htmlFor={`wallet-check-${wallet.id}`}>
-                      {t('actual_balance_with_currency', {
-                        currency: wallet.currency,
-                      })}
-                    </Label>
-                    <Input
-                      id={`wallet-check-${wallet.id}`}
-                      inputMode="decimal"
-                      value={values[wallet.id] ?? ''}
-                      onChange={(event) =>
-                        setValues((current) => ({
-                          ...current,
-                          [wallet.id]: event.target.value,
-                        }))
-                      }
-                      placeholder="0"
-                    />
-                  </div>
-                </div>
+                  isAuditedMode={isAuditedMode}
+                  onValueChange={(value) =>
+                    setValues((current) => ({
+                      ...current,
+                      [wallet.id]: value,
+                    }))
+                  }
+                  t={t}
+                  value={values[wallet.id] ?? ''}
+                  wallet={wallet}
+                />
               ))}
               {totals.length > 0 && (
                 <div className="rounded-md border p-3">
@@ -168,7 +195,9 @@ export function WalletTotalCheckDialog({
               {t('cancel')}
             </Button>
             <Button
-              disabled={!canSubmit || mutation.isPending}
+              disabled={
+                !canSubmit || mutation.isPending || walletsQuery.isError
+              }
               onClick={() => {
                 mutation.mutate({
                   checked_at: new Date().toISOString(),
@@ -187,3 +216,147 @@ export function WalletTotalCheckDialog({
     </>
   );
 }
+
+function getAmountBadgeClassName(
+  tone: ReturnType<typeof getWalletBalanceTone>
+) {
+  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 AmountBadge({
+  amount,
+  currency,
+  icon,
+  label,
+  signDisplay = 'auto',
+}: {
+  amount: number;
+  currency: string;
+  icon?: ReactNode;
+  label: string;
+  signDisplay?: 'auto' | 'always' | 'exceptZero' | 'never';
+}) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'flex w-fit items-center gap-1 whitespace-nowrap',
+        getAmountBadgeClassName(getWalletBalanceTone(amount))
+      )}
+    >
+      {icon}
+      <span className="font-medium opacity-75">{label}</span>
+      <WalletCheckpointAmount
+        amount={amount}
+        currency={currency}
+        signDisplay={signDisplay}
+      />
+    </Badge>
+  );
+}
+
+function WalletTotalCheckRow({
+  isAuditedMode,
+  onValueChange,
+  t,
+  value,
+  wallet,
+}: {
+  isAuditedMode: boolean;
+  onValueChange: (value: string) => void;
+  t: ReturnType<typeof useTranslations>;
+  value: string;
+  wallet: WalletInput;
+}) {
+  const {
+    auditStatus,
+    auditVariance,
+    contextBalance,
+    displayBalance,
+    hasAuditedBalance,
+    usesAuditedBalance,
+  } = resolveWalletBalanceForMode(wallet, isAuditedMode ? 'audited' : 'ledger');
+  const displayTone = getWalletBalanceTone(displayBalance);
+  const varianceTone = getWalletBalanceTone(auditVariance ?? 0);
+  const showAuditContext =
+    hasAuditedBalance &&
+    auditStatus !== 'clean' &&
+    auditStatus !== 'no_checkpoint' &&
+    auditVariance !== null &&
+    auditVariance !== 0;
+
+  return (
+    <div className="grid gap-2 rounded-md border p-3">
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <div className="truncate font-medium text-sm">{wallet.name}</div>
+          <div className="mt-1 flex flex-wrap items-center gap-1.5">
+            <AmountBadge
+              amount={displayBalance}
+              currency={wallet.currency}
+              icon={
+                displayTone === 'positive' ? (
+                  <TrendingUp className="h-3 w-3" />
+                ) : displayTone === 'negative' ? (
+                  <TrendingDown className="h-3 w-3" />
+                ) : undefined
+              }
+              label={usesAuditedBalance ? t('audited') : t('ledger')}
+            />
+            {showAuditContext && contextBalance !== null && (
+              <>
+                <AmountBadge
+                  amount={contextBalance}
+                  currency={wallet.currency}
+                  icon={<WalletIcon className="h-3 w-3" />}
+                  label={isAuditedMode ? t('ledger') : t('audited')}
+                />
+                <AmountBadge
+                  amount={auditVariance ?? 0}
+                  currency={wallet.currency}
+                  icon={
+                    varianceTone === 'negative' ? (
+                      <TrendingDown className="h-3 w-3" />
+                    ) : (
+                      <TrendingUp className="h-3 w-3" />
+                    )
+                  }
+                  label={t('variance')}
+                  signDisplay="always"
+                />
+              </>
+            )}
+          </div>
+          {isAuditedMode && auditStatus === 'no_checkpoint' && (
+            <div className="text-muted-foreground text-xs">
+              {t('no_checkpoint_short')}
+            </div>
+          )}
+        </div>
+        <div className="text-muted-foreground text-xs">{wallet.currency}</div>
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor={`wallet-check-${wallet.id}`}>
+          {t('actual_balance_with_currency', {
+            currency: wallet.currency,
+          })}
+        </Label>
+        <Input
+          id={`wallet-check-${wallet.id}`}
+          inputMode="decimal"
+          value={value}
+          onChange={(event) => onValueChange(event.target.value)}
+          placeholder="0"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/finance/wallets/columns-rendering.test.tsx

@@ -0,0 +1,125 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import type { ReactElement } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { walletColumns } from './columns';
+
+const mocks = vi.hoisted(() => ({
+  isConfidential: false,
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('../shared/use-finance-confidential-visibility', () => ({
+  FINANCE_HIDDEN_AMOUNT: 'hidden amount',
+  useFinanceConfidentialVisibility: () => ({
+    isConfidential: mocks.isConfidential,
+  }),
+}));
+
+function renderBalanceCell(
+  wallet: Wallet,
+  balanceMode: 'audited' | 'ledger' = 'audited'
+) {
+  const columns = walletColumns({
+    extraData: {
+      balanceMode,
+      currency: wallet.currency || 'USD',
+    },
+    namespace: 'wallet-data-table',
+    t: (key: string) => key,
+  });
+  const balanceColumn = columns.find((column) => column.id === 'balance');
+
+  if (!balanceColumn || typeof balanceColumn.cell !== 'function') {
+    throw new Error('Expected balance column cell renderer');
+  }
+
+  render(
+    balanceColumn.cell({
+      row: {
+        original: wallet,
+      },
+    } as never) as ReactElement
+  );
+}
+
+describe('wallet balance badge rendering', () => {
+  beforeEach(() => {
+    mocks.isConfidential = false;
+  });
+
+  it('suppresses ledger and variance badges for clean checkpoints', () => {
+    renderBalanceCell({
+      audit_balance: 100,
+      audit_status: 'clean',
+      audit_variance: 0,
+      balance: 100,
+      currency: 'USD',
+    } as Wallet);
+
+    expect(screen.queryByText('ledger')).not.toBeInTheDocument();
+    expect(screen.queryByText('variance')).not.toBeInTheDocument();
+  });
+
+  it('shows distinct context badges only while hovering the balance', () => {
+    renderBalanceCell({
+      audit_balance: 95,
+      audit_status: 'unresolved',
+      audit_variance: -5,
+      balance: 100,
+      currency: 'USD',
+    } as Wallet);
+
+    expect(screen.queryByText('ledger')).not.toBeInTheDocument();
+    expect(screen.queryByText('variance')).not.toBeInTheDocument();
+
+    const trigger = screen
+      .getByText('$95.00')
+      .closest('[data-wallet-balance-trigger]');
+    const balanceBadge = screen
+      .getByText('$95.00')
+      .closest('[data-wallet-balance-badge="varied"]');
+
+    expect(trigger).not.toBeNull();
+    expect(balanceBadge).toHaveClass('text-dynamic-orange');
+    fireEvent.mouseEnter(trigger as Element);
+
+    expect(screen.getByText('ledger')).toBeInTheDocument();
+    expect(screen.getByText('variance')).toBeInTheDocument();
+
+    expect(
+      screen
+        .getByText('ledger')
+        .closest('[data-wallet-balance-context-badge="ledger"]')
+    ).toHaveClass('text-dynamic-blue');
+    expect(
+      screen
+        .getByText('variance')
+        .closest('[data-wallet-balance-context-badge="variance"]')
+    ).toHaveClass('text-dynamic-purple');
+
+    fireEvent.mouseLeave(trigger as Element);
+
+    expect(screen.queryByText('ledger')).not.toBeInTheDocument();
+    expect(screen.queryByText('variance')).not.toBeInTheDocument();
+  });
+
+  it('hides all audit amount context when numbers are hidden', () => {
+    mocks.isConfidential = true;
+
+    renderBalanceCell({
+      audit_balance: 95,
+      audit_status: 'unresolved',
+      audit_variance: -5,
+      balance: 100,
+      currency: 'USD',
+    } as Wallet);
+
+    expect(screen.getByText('hidden amount')).toBeInTheDocument();
+    expect(screen.queryByText('ledger')).not.toBeInTheDocument();
+    expect(screen.queryByText('variance')).not.toBeInTheDocument();
+  });
+});

package/src/components/ui/finance/wallets/columns.test.ts

@@ -0,0 +1,56 @@
+import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import { describe, expect, it } from 'vitest';
+import { walletColumns } from './columns';
+
+function getBalanceAccessor(balanceMode: 'audited' | 'ledger') {
+  const columns = walletColumns({
+    extraData: {
+      balanceMode,
+      currency: 'USD',
+    },
+    namespace: 'wallet-data-table',
+    t: (key: string) => key,
+  });
+  const balanceColumn = columns.find((column) => column.id === 'balance');
+
+  if (!balanceColumn || !('accessorFn' in balanceColumn)) {
+    throw new Error('Expected balance column accessor');
+  }
+
+  return balanceColumn.accessorFn as (wallet: Wallet) => number;
+}
+
+describe('wallet columns', () => {
+  it('sorts the balance column by ledger balance in ledger mode', () => {
+    const accessor = getBalanceAccessor('ledger');
+
+    expect(
+      accessor({
+        audit_balance: 500,
+        balance: 100,
+      } as Wallet)
+    ).toBe(100);
+  });
+
+  it('sorts the balance column by audited balance in audited mode', () => {
+    const accessor = getBalanceAccessor('audited');
+
+    expect(
+      accessor({
+        audit_balance: -50,
+        balance: 100,
+      } as Wallet)
+    ).toBe(-50);
+  });
+
+  it('falls back to ledger balance for audited sorting without a checkpoint', () => {
+    const accessor = getBalanceAccessor('audited');
+
+    expect(
+      accessor({
+        audit_status: 'no_checkpoint',
+        balance: 100,
+      } as Wallet)
+    ).toBe(100);
+  });
+});