@tuturuuu/ui 0.4.1 → 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,10 +1,12 @@
+import { render } from '@testing-library/react';
+import type { ReactElement } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 const mocks = vi.hoisted(() => {
   const currencyRateLimit = vi.fn();
 
   return {
-    createClient: vi.fn(() => ({
+    createAdminClient: vi.fn(() => ({
       from: vi.fn((table: string) => {
         if (table === 'currency_exchange_rates') {
           return {
@@ -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: {} })),
   };
 });
@@ -44,8 +48,8 @@ vi.mock('@tuturuuu/internal-api', () => ({
 }));
 
 vi.mock('@tuturuuu/supabase/next/server', () => ({
-  createClient: (...args: Parameters<typeof mocks.createClient>) =>
-    mocks.createClient(...args),
+  createAdminClient: (...args: Parameters<typeof mocks.createAdminClient>) =>
+    mocks.createAdminClient(...args),
 }));
 
 vi.mock('@tuturuuu/utils/workspace-helper', () => ({
@@ -96,8 +100,14 @@ vi.mock('../wallet-icon-display', () => ({
   WalletIconDisplay: () => null,
 }));
 
+vi.mock('../checkpoints/wallet-checkpoint-panel', () => ({
+  WalletCheckpointPanel: () => null,
+}));
+
 vi.mock('./credit-wallet-summary', () => ({
-  CreditWalletSummary: () => null,
+  CreditWalletSummary: (
+    ...args: Parameters<typeof mocks.creditWalletSummary>
+  ) => mocks.creditWalletSummary(...args),
 }));
 
 vi.mock('./interest', () => ({
@@ -105,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', () => ({
@@ -158,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,
@@ -27,10 +26,14 @@ import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 import { Suspense } from 'react';
 import { Card } from '../../../card';
+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';
 
@@ -38,6 +41,7 @@ interface Props {
   wsId: string;
   walletId: string;
   searchParams: {
+    action?: string;
     q: string;
     page: string;
     pageSize: string;
@@ -54,6 +58,7 @@ interface Props {
 export default async function WalletDetailsPage({
   wsId,
   walletId,
+  searchParams,
   defaultCurrency,
   internalApiOptions,
   permissions,
@@ -113,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">
@@ -160,6 +144,7 @@ export default async function WalletDetailsPage({
           wsId={wsId}
           walletId={walletId}
           wallet={wallet as Wallet}
+          initialAction={initialAction}
           canUpdateWallets={canUpdateWallets}
           canCreateTransactions={canCreateTransactions}
           canCreateConfidentialTransactions={canCreateConfidentialTransactions}
@@ -171,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">
@@ -194,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}
                 />
               }
             />
@@ -293,12 +290,15 @@ 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}
+        walletName={wallet.name ?? t('ws-wallets.singular')}
+        currency={currency}
+        canUpdateWallets={canUpdateWallets}
+        canCreateTransactions={canCreateTransactions}
+      />
+      <Separator className="my-4" />
       {/* Interest Tracking Section - for Momo/ZaloPay wallets */}
       <WalletInterestSection wsId={wsId} wallet={wallet as Wallet} />
       <Suspense
@@ -331,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,
@@ -342,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>
   );
 }